标记形式为脏（手动）没有ngModel

我使用的是Angular 4.1.3，并且遇到了这个要求，并想与我分享我的解决方案。不幸的是，关于www.angular.io的文档并没有列出系统组件上的所有可用的道具和方法，例如ngForm元素（或者至少我找不到它）。标记形式为脏（手动）没有ngModel

我的要求是，我需要有一个<input>元素，这是一个<form>是更新其唯一的模糊事件后绑定值的一部分。显然，这是唯一可能不使用[ngModel]看来：

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

但由于输入没有绑定到一个ngModel角不知道这是形式的一部分。所以当值改变时，表格不会被标记为脏。

来源

2017-08-04 Sal

你的意思是没有用'ngModel'或'[ngModel]'或'[ （ngModel）]'或者全部3个？因为在使用'ngModel'时不需要'markAsDirty'，即注册表单控件，因为现在你根本就没有这么做;）如果你想添加验证，你当前的设置将不起作用。 – Alex

@ AJT_82您可以详细说明它如何与** ngModel **协同工作，因为我试过了，它似乎将它绑定到了不存在的东西上。我不知道如何让它与[ngModel]和[（ngModel）]一起工作，因为我希望模型在blur事件上得到更新。 – Sal

首先，你是什么意思**我想模型更新模糊事件**现在你没有模糊事件？ :) – Alex

为了解决这个问题，你需要手动设置形式，脏，要做到这一点，你可以使用markAsDirty（）的ngForm对象这样的方法：

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

来源

2017-08-04 14:02:39 Sal

您需要注册带有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

来源

2017-08-04 16:57:18 Alex

这不符合我的初始要求。我需要绑定变量，在您的示例“用户名”中，只有在用户从文本框（blur事件）点击时才会获取更新。 – Sal

标记形式为脏（手动）没有ngModel

回答

相关问题