Javascript 角度2+；获得“最佳方式”；表格.有效；从另一个组件

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

我的弹出窗口是铭文组件，我的表单是公式化铭文组件

我想从formulaire-pendition.component访问我的form.valid变量，该变量位于pendition.component.html中

题词.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>

环空器
S'inscrire

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

您可以参考此链接，以了解双向交互（父-子）

特别是“父事件侦听子事件”一节，它解释了EventEmitter。您将需要添加到每个事件中，如onPasswordChanges（…）、onAgeChanges（…）、等，。。。在子组件上

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

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

S'inscrire

注意：不要期望将同一对象从子对象传输到父对象。因此，我选择'formValidBoolean'作为@output（）变量。

您可以参考此链接，以了解双向交互（父-子）

特别是“父事件侦听子事件”一节，它解释了EventEmitter。您将需要添加到每个事件中，如onPasswordChanges（…）、onAgeChanges（…）、等，。。。在子组件上

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

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

S'inscrire

---

注意：不要期望将同一对象从子对象传输到父对象。因此，我选择“formValidBoolean”作为@output（）变量。

由于您的表单在

身份验证formulaire铭文组件中是公共的，您可以在该组件上使用模板变量（
#auth
在下面的更新示例中），然后在
[禁用]
稍后检查：

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


环空器
S'inscrire
由于您的表单在
身份验证公式题词组件中是公开的，您可以在该组件上使用模板变量（
#auth
，在下面更新的示例中），然后在
[禁用]
稍后检查中使用它：

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


环空器
S'inscrire
如果您的表单位于
formulaire铭文组件中
，form.valid如何位于
铭文组件中？您可以为这两个组件粘贴模板吗？在您的HTML中，如果possible@Vandesh这是我的问题，我想在铭文组件中使用form.valid，我不知道最好的方法：）。我已经粘贴了模板。如果您的表单位于
formulaire铭文组件中
，form.valid如何才能位于
铭文组件中？您可以为这两个组件粘贴模板吗？在您的HTML中，如果possible@Vandesh这是我的问题，我想在铭文组件中使用form.valid，我不知道最好的方法：）。我已经粘贴了模板。