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

【问题标题】：Angular 2: Passing form data from child to parent only if it is validAngular 2：仅当表单数据有效时才将表单数据从子级传递给父级
【发布时间】：2018-07-14 22:56:36
【问题描述】：

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

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

如何做到这一点？

【问题讨论】：

标签： components angular2-forms interaction

【解决方案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) });
在您的父组件模板中检查该发出事件的状态。

【讨论】：