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

Question

我有一个模板驱动的表单

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

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

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

@ViewChild('myForm') myForm;

使用this.myForm.statusChanges仅给我表格状态（有效，无效等），并且没有说表格是否变脏。 this.myForm.valueChanges仅提供在表单中输入的新值，而不指定表单是原始的还是脏的。

当表单更改时，是否有一种简单的方法来访问组件中模板驱动的表单的脏状态？谢谢。

Answer 1

好吧，您已经收到状态更改的通知，只要表单输入的值发生更改，就会触发该通知。因此，没有理由不能使用它来检查表单是否脏了，因为当表单变脏时，将导致触发statusChanges：

  @ViewChild(NgForm) form: NgForm;

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

一旦表格变脏，订阅将被触发。

Answer 2

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