Question

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

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

下面是示例代码的堆栈链接 stackblitz link

Hello组件具有表单，父组件是app组件。我们正在使用商店，动作和减速器，所以我不想按订阅方法去。

Answer 1

在这种情况下，您可以简单地使用“参考变量”并询问“参考变量”。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”

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

1 个答案: