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

Question

我正在处理 Angular 表单。我有一个具有某些属性的域模型。我使用 ngModel.

绑定它们

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

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

示例 1：

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

示例 2：

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

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

当我将 ngModelOptions="{standalone: true}" 应用到我的所有字段时，我的表单在所有情况下都有效 = true 是否控制（与属性 required) 是否有价值。

我的表格是：

<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

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

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

Answer 2

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

我用以下方法解决这个问题：

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

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

Why do I need to mention name attribute or ngModelOptions="{standalone: true}" while using ngModel?

angular-ngmodel

angular