如何检测/观察＆＃34;脏状态＆＃34;正确的角度2形式？

Question

我在Angular2中有一个表格（例如）

<form id="myLovelyForm" name="myLovelyForm" #myLovelyForm="ngForm">
    <label [attr.for]="myLovelyCheckbox">
      <input [attr.id]="myLovelyCheckbox" type="checkbox"
             [(ngModel)]="myLovelyCheckbox">
      <span class="myLovelyCheckbox">myLovelyCheckbox</span>
    </label>
</form>

和一个动画，如果表格是脏的，应该开始：

<div 
    id="myLovelyNotification" 
    class="myLovelyNotification" 
    [@notification]="myLovelyForm.form.dirty">
.....
.....
</div>

如果我设置[@notification] = true，动画可以正常工作，但如果我触摸表单并更改元素，则myLovelyForm.dirty不会触发。

如果@notification为false，则动画停止，即如果之前选中了复选框并且我错误地取消选中它并再次选择它，则表单不再是原始（触摸）但不再脏，因此动画应该停止。如果我手动设置@notification = false，它可以正常工作。

最大的问题是：如何检测/观察＆＃34;脏状态＆＃34;正确的角度2形式？

Answer 1

简单 -

@ViewChild('f') templateForm: any;


ngOnInit() {
    this.templateForm.valueChanges.subscribe((value: any) => {
        if (this.templateForm.dirty) {
            console.log('template form dirty - yes: ', value);
        } else {
            console.log('template form dirty - no: ');
        }
    });
}

您的模板包含：

 <form  #f="ngForm" (ngSubmit)="save(f)>
    ...
 </form>

然而，这仍然使用模板表单，这些表单确实有助于弥合与Angular1应用程序的差距。模型驱动形式是Angular 2的方式，除了真正的基本应用程序之外的任何东西。例如见：

• https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html
• http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• 并使用自定义组件来真正扩展和优化您的应用 - https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

您可以订阅表单更改：

toKey

如果此事件触发，则表示您的表单很脏。

这是我实际应用程序中的一个示例（nut.abbr是formcontrolName）：

this.physicalForm.valueChanges
   .map((value) => {
      return value;
   })
   .subscribe((value) => {
      if(this.selectedPhysical.weight != this.physicalForm.value.weight)  {      
        this.selectedPhysical.weight = this.physicalForm.value.weight;
      }
      this.isDirty == this.physicalForm.touched;
   });