为什么在使用ngModel时需要提及name属性或ngModelOptions =“ {standalone：true}”？

Question

我正在制作一个Angular Form。我有一个具有某些属性的域模型。我使用ngModel绑定它们。

在此期间，如果我不使用name属性，则会收到以下错误消息。

  

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

示例1：

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

示例2：

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

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

当我将ngModelOptions="{standalone: true}"应用于所有字段时，无论控件（具有属性required 的控件是否有值），在所有情况下我的表单的有效= 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" />

Answer 1

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

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

Answer 2

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

我通过以下方式解决此问题：

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