从组件中检测模板驱动的表单更改

Question

我有一个模板驱动的表单

<form #form="ngForm">
  ...
</form>

我需要检测 component.ts 文件中的表单是否变脏。

我知道我可以在组件中使用@ViewChild 访问表单

@ViewChild('myForm') myForm;

使用 this.myForm.statusChanges 只会给我表单状态（有效、无效等），它不会说明表单是否变脏。 this.myForm.valueChanges 只给出在表单中输入的新值，不指定表单是原始的还是脏的。

有没有一种简单的方法可以在表单更改时访问组件中模板驱动表单的脏状态？谢谢。

Answer 1

使用反应形式。 https://angular.io/guide/reactive-forms。您将能够创建一个 FormGroup 并控制表单的状态。

Answer 2

好吧，如果状态发生变化，您已经收到通知，只要表单输入的值发生变化，就会触发通知。所以你没有理由不能用它来检查表单是否脏了，因为当表单变脏时，它会导致 statusChanges 被触发：

  @ViewChild(NgForm) form: NgForm;

  ngOnInit() {
    this.form.statusChanges.subscribe(() => {
      console.log("Is form dirty yet: " + this.form.dirty);
    });

一旦表单变脏，订阅就会被触发。

从组件中检测模板驱动的表单更改

Detect template driven form change from the component

angular

angular-forms