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

Question

我正在研究 Angular Form。我有一个具有一些属性的域模型。我通过使用绑定它们ngModel。

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

ERROR 错误：如果在表单标签中使用 ngModel，则必须设置 name 属性或表单控件必须在 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" />

Answer 1

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