不使用ngModel将表单标记为脏（手动）

Question

我正在使用Angular 4.1.3，遇到了这一要求，并希望与我分享我的解决方案。不幸的是，www.angular.io上的文档并未真正列出系统组件（例如ngForm元素）上所有可用的道具和方法（或者至少我找不到它）。

我的要求是，我需要具有一个<input>元素，该元素<form>仅在blur事件之后才更新其绑定的值。显然，这似乎只有在不使用[ngModel]的情况下才可能实现：

<form #f="ngForm">
    <input (change)="myVar = $event.target.value" [value]="myVar" />
    <span *ngIf="f.dirty">Form is Dirty!</span>
</form>

但是由于此输入未绑定到ngModel，因此 Angular不知道它是表单的一部分。因此，当更改值时，表单不会标记为dirty。

Answer 1

要解决此问题，您需要手动将表单设置为肮脏，并且可以在ngForm对象上使用markAsDirty（）方法，如下所示：

<form #f="ngForm">
    <input (change)="myVar = $event.target.value; f.form.markAsDirty();" [value]="myVar" />
    <span *ngIf="f.dirty">Form is Dirty!</span>
</form>