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

问题描述

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

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

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

Hello 组件有表单，父组件是 app 组件.我们正在使用 store、actions 和 reducer，所以我不想通过订阅方法去.

解决方案

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

<!--使用引用变量"来引用组件--><你好#form></hello><div class="form-group"><button class="btn btn-primary" [disabled]="form.emailForm?.invalid">提交</button>

<!--仅用于检查"-->{{form.emailForm?.value|json}}

看到表单"是组件.该组件有一个变量emailForm"

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>

Below is the link of stackblitz of sample code stackblitz link

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.

解决方案

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

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

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