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

Question

反应式表单 要让组件能够侦听其包含的表单的有效性状态的变化并执行某些组件的方法？

像

[disabled]="#myForm.invalid"

一样使用templateRef可以很容易地禁用模板中的提交按钮，但这不涉及组件的逻辑。

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

Answer 1

如果您只想获得

status

而不是

value

，您可以使用

statusChanges

:

export class Component {

    @ViewChild('myForm') myForm;

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

如果您甚至想要更改数据，您可以订阅

valueChanges

的

form

并使用

this.myForm.status

检查表单的状态：

export class Component {

    @ViewChild('myForm') myForm;

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

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

这是相同的参考

Answer 2

您可以执行类似的操作来检测有效性更改并根据表单是

VALID

还是

INVALID

执行方法。

this.myForm.statusChanges
  .subscribe(val => this.onFormValidation(val));

onFormValidation(validity: string) {
  switch (validity) {
    case "VALID":
      // do 'form valid' action
      break;
    case "INVALID":
      // do 'form invalid' action
      break;
  }
}

Answer 3

我可能会迟到，但 @Viewchild('anything') 可能会导致此错误

Cannot read properties of undefined (reading 'statusChanges')
Cannot read properties of undefined (reading 'valueChanges')

您只需订阅表格即可。代码示例：

form:FormGroup;

ngOnInit(){
this.form.valueChanges.subscribe((result: any) =>
      console.log('values changes here') );}

Answer 4

您可以订阅整个表单更改并在那里实现您的逻辑。

@ViewChild('myForm') myForm;

this.myForm.valueChanges.subscribe(data => console.log('Form changes', data));

Answer 5

除了

statusChanges

之外，您还可以通过添加

.pipe(distinctUntilChanged())

来进一步扩展它，以仅在状态发生变化时触发订阅 - 正如 这里提到的。

如果没有这个

pipe

，每次值发生变化时都会触发

statusChanges

订阅 - 使其几乎类似于

valueChanges

this.myForm.statusChanges
    .pipe(distinctUntilChanged())
    .subscribe((status) => {
        if (status === 'VALID') {
            // logic for Valid status
        }

        if (status === 'INVALID') {
            // logic for Invalid status
        }
    })