Question

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

我的要求是我需要一个<input>元素，该元素是<form>的一部分，仅在模糊事件之后才更新其绑定的值。显然，只有在没有使用 [ngModel] 的情况下才能实现这一点：

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

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

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>

Answer 2

您需要使用name属性和ngModel注册表单控件。现在，每个控件都标记了（唯一的）name值和ngModel，这意味着它现在已注册为表单控件。

此外，您需要通过将ngModel导出到本地模板变量来检查控件状态，例如#someRef="ngModel"。现在我们也可以对这个表单控件进行验证，同时，由于Angular遵循此控件的状态，Angular可以看到表单是脏的（除其他外）。

例如，使用上面我们可以有一个（剥离的）形式：

<form #f="ngForm">
  <label>Username</label>
  <input name="username" ngModel #userName="ngModel">
</form>

<span *ngIf="f.dirty">Form is Dirty!</span>

演示：http://plnkr.co/edit/N7qJlnSIr1w6NMAUBSbD?p=preview

在没有ngModel的情况下将表单标记为脏（手动）

2 个答案: