当表单位于子组件中时，在父组件中禁用/启用提交按钮 [英] Disable/Enable submit button in parent component when forms are in child component

问题描述

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

I am using angular reactive forms and I have child components which have forms but submit button is on parent component so I want to restrict the user to go next page by clicking submit button(parent component) based on the form validation in child components. My queston is how parent component ts will know that validation of forms in child components has been done

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

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

Below is the link of stackblitz of sample code stackblitz link

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

Hello component have form and parent component is app component. We are using store, actions and reducers so i dont want to go by subscribe method.

推荐答案

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

In this case, you can simple use a "reference variable" and ask about "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}}

看到表单"是组成部分.该组件具有变量"emailForm"

See that "form" is the component. the component has a variable "emailForm"

这篇关于当表单位于子组件中时，在父组件中禁用/启用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！