Angular 2+ лучший способ получить "form.valid" из другого компонента

Question

У меня есть форма во всплывающем окне,

Мое всплывающее окно - это компонент надписи, а моя форма - компонент-надписи.

Я хочу получить доступ к моей переменной form.valid в inscription.component.html из Formula-Inscription.component.

inscription.component.html:

<clr-modal [(clrModalOpen)]="inscriptionModal" [clrModalClosable]="false" [clrModalSize]="'lg'">
  <div class="modal-body">
    <authentification-formulaire-inscription></authentification-formulaire-inscription>
  </div>    
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="closeModalInscription()"> Annuler </button>
    <button type="button" class="btn btn-primary" (click)="closeModalInscription()" disabled=[!form.valid]> S'inscrire </button>
  </div>    
</clr-modal>

Мой вопрос: каков наилучший способ доступа к этой переменной?

Answer 1

Поскольку ваша форма общедоступна в компоненте authentification-formulaire-inscription, вы можете просто использовать переменную шаблона (#auth в обновленном примере ниже) для этого компонента, а затем использовать ее в своей проверке [disabled] позже:

<clr-modal [(clrModalOpen)]="inscriptionModal" [clrModalClosable]="false" [clrModalSize]="'lg'">
  <div class="modal-body">
    <authentification-formulaire-inscription #auth></authentification-formulaire-inscription>
  </div>    
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="closeModalInscription()"> Annuler </button>
    <button type="button" class="btn btn-primary" (click)="closeModalInscription()" disabled=[!auth.form.valid]> S'inscrire </button>
  </div>    
</clr-modal>

Answer 2

Вы ссылаетесь на эту ссылку, https://angular.io/guide/component-interaction, чтобы понять двустороннее взаимодействие ( parent <-> child ).

В частности, раздел «Родитель слушает дочернее событие», в котором рассказывается о EventEmitter. Вам нужно будет добавить к каждому событию, например, onPasswordChanges (...), onAgeChanges (...), ... в дочернем компоненте.

Вы можете получить formValidBoolean из родительского компонента. С состоянием флага formValidBoolean вы можете разрешить Angular включить \ отключить кнопку.

<button type="button" class="btn btn-primary" (click)="closeModalInscription()" disabled=[!formValidBoolean]> S'inscrire </button>

Примечание. Не ожидайте, что один и тот же объект будет передан от потомка к родителю. Поэтому я выбираю formValidBoolean как переменную @output ().