Как отключить / включить кнопку отправки в родительском компоненте, когда форма находится в ее ng-содержимом

Question

У меня есть следующий формально-модальный компонент:

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close"
     (click)="activeModal.dismiss('Cross click')">
    </button>
</div>

<ng-content #form></ng-content>

<div class="modal-footer">
    <button class="btn btn-primary btn-danger" (click)="onCancel()">
        Cancel
      </button>
    <button class="btn btn-primary btn-success" type="submit" form="formModal" [disabled]="form.formModalGroup?.invalid">
        Save
      </button>
</div>

НГ-контент сам содержит определенную форму. Вопрос в том, как получить статус валидности formGroup из ng-содержимого в этот родительский формально-модальный компонент. Я попытался создать событие из определенного компонента формы, также @ContentChild, и у меня также возник этот очень похожий вопрос:

Отключить / включить кнопку отправки в родительском компоненте, когда формы находятся в дочернем элементекомпонент

Но это исправление не работает при добавлении ссылки непосредственно в тег ng-content.

Answer 1

Как я видел в вашем коде, вы сталкиваетесь с общей проблемой, с которой мы все сталкивались: общение между родителем / ребенком / братьями и сестрами ...

Если вы хотите реагировать на изменения в действительностиформы в вашем файле TS, я мог видеть 2 основных варианта:

• Использование @ContentChild:

@ContentChild("form", {static: false}) form;

ngAfterContentInit() {
    // here now you can access to the form instance, and subscribe to changes on the status
    this.form.statusChanges.subscribe(
        result => console.log(result)
    );

  }

Полный пример ответа: https://stackoverflow.com/a/49666202/6852402

• Подумайте об использовании общей службы между двумя компонентами и используйте наблюдаемую BehaviorSubject. BehaviorSubject является основой библиотек состояний на основе RxJ.

Здесь вы можете увидеть полное объяснение и пример: https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

Answer 2

Должно работать с @ContentChild, в вашем TS:

@ContentChild(YourComponentType, {static: true}) childComponent:YourComponentType;

В вашем HTML:

[disabled]="!childComponent || childComponent.formModalGroup?.invalid"