我在 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 形式的“脏状态”?
最佳答案
简单——
@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 的一种方式,除了真正的基本应用程序之外,它可以用于任何事情。参见示例:
关于forms - 如何以正确的方式检测/观看 angular2 形式的 "dirty-status"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39699752/