为什么在使用 ngModel 时需要提及 name 属性或 ngModelOptions="{standalone: true}"？答案

【问题标题】：Why do I need to mention name attribute or ngModelOptions="{standalone: true}" while using ngModel?为什么在使用 ngModel 时需要提及 name 属性或 ngModelOptions="{standalone: true}"？
【发布时间】：2019-09-30 04:47:55
【问题描述】：

我正在处理一个 Angular 表单。我有一个具有一些属性的域模型。我正在使用ngModel 绑定它们。

在此期间，如果我不使用name 属性，则会出现以下错误。

ERROR 错误：如果在表单标记中使用 ngModel，则必须设置名称属性或必须将表单控件定义为 ngModelOptions 中的“独立”。

示例 1：

<input [(ngModel)]="person.firstName" name="first">

示例 2：

<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

为什么我在双向绑定中绑定域模型时需要提及name属性或ngModelOptions？

当我将ngModelOptions="{standalone: true}" 应用于我的所有字段时，无论控件（带有属性required）是否具有价值，我的表单的valid = true 在所有情况下。

我的表格是：

<form #detailForm="ngForm" (ngSubmit)="save(detailForm)" id="ngForm">
</form>

当我的提交按钮在表单之外时：

<input type="button" form="ngForm" class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" [disabled]="!detailForm.form.valid" />

【问题讨论】：

我猜你没有使用模板驱动，这就是为什么我们需要写一个standalone。如果您使用的是模板驱动的表单，则不需要 standalone。
我的提交按钮是表单外的普通按钮。
在表单后面，有一个包含 FormControls 的 FormGroup，由名称标识。设置输入的名称属性允许定义表单控件的名称。没有名称，Angular 无法将表单控件注册到表单组中。

标签： angular angular-ngmodel

【解决方案1】：

我在使用动态表单时遇到了这个问题。我必须在表单中添加新行（包括输入），当我向表单中添加新数据时，旧字段值是干净的。

我解决了这个问题：

..*ngFor="let item in formArr; let i = index"...
    ..name="myInput-{{i}}" #myInput{{i}}="ngModel"..

【讨论】：

【解决方案2】：

表单只是一组键/值对。 Name 是用于识别/获取/设置该控件的值的键，因此您需要指定每个控件的名称。当您设置 ngModelOptions="{standalone: true}" 时，您告诉 angular 不要将此输入包含到表单中。这就是为什么您的表格始终有效的原因。它实际上是空的。

https://angular.io/api/forms/NgModel#options

【讨论】：

好的，现在如果我为每个控件设置名称，那么我有两个具有相同属性的对象。 1 是我的域对象，而另一个是由 form.value 返回的对象。这样做对吗？
对不起，我不明白您所说的“相同属性”是什么意思。你不能有两个同名的控件，没有其他限制。
我的意思是说，如果我有一个从 API 接收到的 json 对象（Person）并且我使用（例如）[(ngModel)]="Person 将该 json 对象（Person）绑定到我的表单.personName”，并添加一个名称属性 name="personName"。现在我有一个 json 对象和 form.value 返回的另一个对象。
我仍然不确定你在问什么。 1. 你绑定的不是对象Person，而是属性personName。 2. form.value 将包含具有您在模板中定义的表单结构的新对象。 1和2不是同一个对象。
对不起，我无法解释清楚。在我的例子中，Person Object 具有需要与表单控件绑定的属性。假设 Person 对象中有 10 个输入控件和 10 个属性。现在，如果我使用 ngModel、name 属性将这 10 个属性绑定到表单，那么 form.value 返回一个具有 10 个属性的对象。这样，我就有了一个有 10 个属性的 Person 对象和一个有 10 个属性的 form.value。