首页 文章

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

提问于
浏览 次
2

我正在使用Angular 4.1.3并遇到了这个要求，并希望与我分享我的解决方案 . 不幸的是www.angular.io上的文档没有找到它 .

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

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

但由于此输入未绑定到表单的一部分 . 因此，当值更改时，表单不会标记为 dirty .

forms angular

2 回答

  • 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>
    回复于
  • 1

    您需要使用 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

    回复于

相关问题