Angular 5模板表单检测表单有效性状态的变化

Question

是reactive forms为了拥有一个组件，该组件可以监听其包含的表单的有效性状态的变化并执行某些组件的方法，该怎么做？

使用 templateRef 很容易禁用模板中的提交按钮，如 [disabled]="#myForm.invalid"，但这不涉及组件的逻辑。

查看template forms' doc没找到方法

Answer 1

如果你只想获取status而不是value，你可以使用statusChanges:

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

如果您甚至想要更改数据，您可以订阅 form 的 valueChanges 并使用 this.myForm.status< 检查表单的状态:

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

状态的可能值为:VALID、INVALID、PENDING 或DISABLED。

Here is the reference for the same