时间戳

首页 > 解决方案 > 当表单位于子组件中时，禁用/启用父组件中的提交按钮

angular - 当表单位于子组件中时，禁用/启用父组件中的提交按钮

问题描述

我正在使用角度反应式表单，并且我有具有表单但提交按钮位于父组件上的子组件，因此我想通过基于子组件中的表单验证单击提交按钮（父组件）来限制用户进入下一页。我的问题是父组件 ts 如何知道子组件中的表单验证已经完成

<div class="parent">
<child-form-component></child-form-component>
<button type="submit">Submuit</button>
</div>

下面是示例代码 stackblitz链接的stackblitz链接

Hello 组件有表单，父组件是应用程序组件。我们正在使用 store、actions 和 reducers，所以我不想通过 subscribe 方法。

标签： angularangular-reactive-forms

解决方案

在这种情况下，您可以简单地使用“引用变量”并询问“引用变量”.emailform.invalid

<div>
    <!--use a "reference variable" to can refered to the component-->
    <hello #form></hello>
    <div class="form-group">
        <button class="btn btn-primary" [disabled]="form.emailForm?.invalid">Submit</button>
  </div>
</div>
<!--just for "check" -->
{{form.emailForm?.value|json}}

看到“表单”是组件。该组件有一个变量“emailForm”

推荐阅读