角度5模板形式检测形式有效性状态的变化

Question

是活性形式,以去具有可以聆听到它包含并执行一些成分,它的方法形式的有效性状态变化的组件的方式吗？

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

看模板表单'doc我没找到方法

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