Angular. Передать свойства формы ISVALID в родительский компонент
Всем привет! У меня такой вопрос, у меня есть несколько компонентов. Например у меня есть родительский компонент который являет собой форму с сложной моделью (модель содержит массивы вложенных объектов). Далее у меня есть второй компонент это модальное окно через которое я хочу редактировать/добавлять/изменять вложенные в модель объекты. В свою очередь модальное окно содержит в себе "ng-content", в который я собственно говоря и запихиваю другую форму. Выглядит это так примерно:
<app-modal #itemModal (onOk)="saveItem()">
<app-item [model]="selectedItem" ></app-item>
</app-modal>
При этом app-item это форма.
Компонент для модалки выглядит вот так:
<div (keydown.enter)="keyDown($event)" class="modal fade" id="modal-{{Id}}" tabindex="-1" role="dialog" attr.aria-labelledby="app-modal-lable-{{Id}}" aria-hidden="true">
<div class="modal-dialog" [class.modal-lg]="large" [class.modal-xl]="xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="app-modal-lable-{{Id}}">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{text}}
<ng-content></ng-content> \\ тут может быть передан любой контент
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" [disabled]="???" (click)="ok()">{{'Action.OK' | translate }}
</button>
<button type="button" class="btn btn-secondary" (click)="hide()">{{'Action.Cancel' | translate }}</button>
</div>
</div>
</div>
</div>
Теперь вопрос, как мне сделать так, что если у меня в модалку передается компонент который содержит форму, то чтоб в модальном окне кнопка OK была неактивной до тех пор пока форма не станет валидной?