forms - 如何以正确的方式检测/观看 angular2 形式的 "dirty-status"？

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，它会正常工作。

最大的问题是:如何以正确的方式检测/观察 angular2 形式的“脏状态”？

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