Disable/Enable 当表单在子组件中时，在父组件中提交按钮

Question

我正在使用 angular 反应式表单，我的子组件有表单，但提交按钮在父组件上，所以我想限制用户通过单击提交按钮（父组件）进入下一页关于子组件中的表单验证。我的问题是父组件 ts 如何知道子组件中的表单验证已经完成

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

下面是stackblitz的link示例代码 stackblitz link

Hello 组件有 form，父组件是 app 组件。我们正在使用商店、行动和减速器，所以我不想通过订阅方法。

Answer 1

在这种情况下，您可以简单地使用 "reference variable" 并询问 "reference variable"。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}}

看到"form"是组件。该组件有一个变量 "emailForm"

Disable/Enable 当表单在子组件中时，在父组件中提交按钮

Disable/Enable submit button in parent component when forms are in child component

angular

angular-reactive-forms