Question

是reactive forms的方法，以便有一个组件可以监听它包含的表单的有效性状态的变化并执行某些组件的方法吗？

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

Answer 1

如果您只想使用status而不是value，则可以使用statusChanges：

export class Component {

    @ViewChild('myForm') myForm;

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

如果您甚至想要更改数据，可以订阅valueChanges的{{1}}并使用form检查表单的状态：

this.myForm.status

状态的可能值包括：有效，无效，待处理或已禁用。

Here is the reference for the same

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('myForm') myForm;

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

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

3 个答案: