angular 5模板表单检测表单有效状态的更改

要使组件能够侦听它所包含的表单的有效性状态中的更改并执行某些组件的方法，该怎么办

使用templateRef（如

[disabled]=“#myForm.invalid”

）在模板中禁用submit按钮很容易，但这并不涉及组件的逻辑

---

查看我没有找到一种方法

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

@ViewChild('myForm') myForm;

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

---

如果只想获取

状态

而不想获取

值

，可以使用

状态更改

：

export class Component {

    @ViewChild('myForm') myForm;

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

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

表单的
值更改
，并使用
this.myForm.status
检查表单的状态：

export class Component {

    @ViewChild('myForm') myForm;

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

状态的可能值为：有效、无效、待定或禁用。

您可以执行类似的操作—检测有效性更改，并根据表单是否有效执行方法

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;
  }
}

不知道是谁投了反对票。。。由于myForm将是AbstractControl的一个实例，因此订阅form.statusChanges更好，它将返回有效、无效、挂起或禁用的可观察值。实际上，我有点担心挂起，因为我不知道它的含义…挂起是当角度处于验证检查中时，当它开始验证并通过所有检查时，状态开始
PENDING
，并最终更改为
Valid
或
Invalid
，如果不需要更改数据，您可以使用
statusChanges
，这样我就可以忽略挂起并等待发出新的stats值。非常感谢：）@AdnanSheikh您可以使用
debounceTime
延迟更改检测。示例：
this.myForm.valueChanges.pipe（debounceTime（5000））.subscribe（result=>console.log（'formchanges'，result））。这可以最小化为三元运算符：
validity==“VALID”？方法：（方法）（<）/代码>但是我警告要小心，不要在大文件中使用这种方法——在大文件中可以考虑奇怪的语法。