禁用/启用父组件提交按钮时,表格中的子组件

问题描述 投票:-3回答:1

我采用了棱角分明的反应形式和我有有形式的童工组成部分,但提交按钮是父组件,所以我想限制用户通过点击提交基于在子组件的形式确认按钮(父组件)进入下一个页面。我queston是父组件TS怎么会知道的形式子组件验证已完成

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

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

你好组件具有形式和父组件的应用程序组件。我们使用的,所以我不希望通过订阅方式去商店,行动和减速。

angular angular-reactive-forms
1个回答
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”

© www.soinside.com 2019 - 2024. All rights reserved.