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

问题描述

反应式表单可以监听它包含的表单有效性状态的变化并执行一些组件的方法的组件?

are reactive forms the way to go in order to have a component that can listen for changes in the validity status of the form it contains and execute some compoment's methods?

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

It is easy to disable the submit button in the template using templateRef like [disabled]="#myForm.invalid", but this does not involve the component's logic.

查看模板表单的文档我没有找到方法

推荐答案

如果你只想得到 status 而不是 value 你可以使用 statusChanges:

If you want to get only the status and not the value you can use statusChanges:

export class Component {

    @ViewChild('myForm') myForm;

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

如果您甚至想要更改数据，您可以订阅 form 的 valueChanges 并使用 this.myForm.status:

If you even want data changes, you can subscribe to the valueChanges of the form and check the status of the form using this.myForm.status:

export class Component {

    @ViewChild('myForm') myForm;

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

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

Possible values of status are: VALID, INVALID, PENDING, or DISABLED.

这里是相同的参考

这篇关于angular 5 模板表单检测表单有效性状态的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！