Angular 2：仅当表单数据有效时才将表单数据从子级传递给父级

Posted 2023-02-23

【中文标题】Angular 2：仅当表单数据有效时才将表单数据从子级传递给父级

【英文标题】：Angular 2: Passing form data from child to parent only if it is valid

【发布时间】：2018-07-14 22:56:36

【问题描述】：

我在子组件中有一个角度反应形式，在父组件中有一个 提交 按钮。默认情况下，父组件中的提交按钮是禁用的。我需要一种机制，通过它我应该能够检查子组件中的表单状态，无论是 valid 还是 invalid。

当状态valid变为true时，父组件中的按钮应该是启用的。

如何做到这一点？

【参考方案1】：

我的解决方案

app.child.ts

@Component(
    selector: 'app-child',
    template: `...`
)
export class AppChild 
    form: FormGroup;

app.parent.html

<app-child #child></app-child>

<button [disabled]="child.form.invalid">Submit</button>

【讨论】：

这个方法很好用。我还使用（单击）并将表单传递给父级中的方法并访问父级中的子表单。这是最好的方法还是有其他性能更好的方法？

您可以为此目的使用 ValidationService。创建您自己的服务ValidatorService 以及一些如何通知parentComponent 检查和emit 该服务的验证状态和subscribe 从parentComponent 到该状态，如果有任何变化，它将被赶上callback function 做你想做的事

【参考方案2】：

您需要在子组件中订阅 valueChanges 事件，您可以在其中发出表单的值，

this.formname.valueChange.subscribe(status=> this.valueEmit.emit(this.formname.valid) );

在您的父组件模板中检查该发出事件的状态。