javascript - 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>

我的问题是访问此变量的最佳方法是什么？

标签： javascriptangulartypescriptangular5

Answer 1

您参考此链接https://angular.io/guide/component-interaction以了解两种方式的交互（父 <--> 子）。

特别是“父母监听子事件”部分，它解释了 EventEmitter。您需要在子组件上添加每个事件，例如 onPasswordChanges(...)、onAgeChanges(...)、...。

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

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

注意：不要期望从孩子转移到父母的相同对象。所以，我选择“formValidBoolean”作为@output() 变量。