Angular 2+从另一个组件获取“form.valid”的最佳方法

Question

我在弹出窗口中有一个表单，

我的弹出窗口是铭文组件，我的表格是公式铭文组件。

我想从formulaire-inscription.component访问inscription.component.html中的form.valid变量。

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

您可以引用此链接https://angular.io/guide/component-interaction来了解双向互动（父级＆lt; - ＆gt;孩子）。

特别是，该部分，'父母听取了儿童事件＆＃39;这解释了EventEmitter。您需要在子组件上添加onPasswordChanges（...），onAgeChanges（...），...等每个事件。

您可以从父组件接收formValidBoolean。使用formValidBoolean标志的状态，您可以让Angular启用\禁用按钮。

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

注意：不要指望将相同的对象从子节点传输到父节点。所以，我选择了＆＃39; formValidBoolean＆＃39;作为@output（）变量。

Answer 2

由于您的表单在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>