forms - 在没有 ngModel 的情况下将表单标记为脏(手动)

Question

我正在使用 Angular 4.1.3 并遇到了这个需求并想分享我的解决方案。不幸的是 www.angular.io 上的文档并没有真正列出系统组件(例如 ngForm 元素)上所有可用的 props 和方法(或者至少我找不到)。

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

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

但是因为这个输入没有绑定(bind)到 ngModel Angular 不知道它是表单的一部分。因此，当值更改时，表单不会标记为脏。

Answer 1

要解决此问题，您需要手动将表单设置为脏表单，为此您可以在 ngForm 对象上使用 ma​​rkAsDirty() 方法，如下所示:

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