ngModel指令在此用例中如何工作？

Question

我是Angular的一个完整的初学者，对于NgModel指令及其可能的用例，我有一些概念上的疑问。

阅读Angular官方文档：https://angular.io/api/forms/NgModel

我只能读：

根据域模型创建FormControl实例，并将其绑定到表单控制元素。

在我看来，此[[FormControl应该是一个对象，其中包含插入到我的表单字段中的值以及相关字段的状态（例如，出于验证目的）。这是对的吗？现在，我对具体的用例有些怀疑。

所以让我们举个例子。

我有这个表格：

<form (ngSubmit)="onSubmit(form)" #form="ngForm">
  <div class="form-group">
    <label for="name">Character Name</label>
    <input
      type="text"
      id="name"
      name="name"
      class="form-control"
      ngModel
      required
      #nameCtrl="ngModel">
    <span class="help-block" *ngIf="nameCtrl.invalid && nameCtrl.touched">Please, enter a name!</span>
  </div>

  <div class="form-group">
    <label for="side">Chose Side</label>
    <select name="side" id="side" class="form-control" ngModel>
      <option *ngFor="let option of availableSides" [value]="option.value">
        {{ option.display }}
      </option>
    </select>
  </div>

  <button class="btn btn-primary" type="submit" [disabled]="form.invalid">Add Character</button>
</form>

在我的父表单元素上，我有：
＃form =“ ngForm”

。到底是什么意思？据我了解，它只是在form“ object” \ reference。中创建整个表单的引用。

然后我的表单中有这个

input

字段：

这里

ngModel

出现两次：为什么我有第一个

ngModel

？究竟是什么意思？第二次出现的是

＃nameCtrl =“ ngModel”

，它应该简单地在nameCtrl“地址”中创建此输入字段的引用。

Answer 1

NgModel伪指令从域模型创建FormControl实例，并将其绑定到表单控件元素。是的。

在下面的所有示例中，NgModel指令都应用于​​输入元素。

<input name="name" ngModel>

<input name="name" [ngModel]="someValue">

<input name="name" [(ngModel)]="someValue">

这意味着对于Angular以上的每个元素，将创建NgModel class的实例。 
内部该类为a new instance of FormControl
 public readonly control: FormControl = new FormControl(); 

哪个值将被更新，并随后与模型，输入元素和其余表单同步，]。>
接下来您需要了解的是template reference variable(#var)
此变量帮助我们掌握对某些实例的引用：HTMLElement或Angular Component / Directive / Service。
模板参考变量可以具有值#var="exportAsValue"。这使我们可以引用特定实例，例如我们将指令添加到元素，并希望我们的模板引用变量引用第一个指令。
对于这种情况，我们需要在@Directive装饰器定义中定义
exportAs
属性：@Directive({
  selector: '[myDir]',
  exportAs: 'myCoolDir'
})
export class MyDir {
  someProp: string;
}
现在，我们可以使用以下代码段引用MyDir实例：
<div myDir #someRef="myCoolDir">
   {{ someRef.someProp }}
返回您的示例：
[#form="ngForm"拥有对NgForm类的引用
[#nameCtrl="ngModel"拥有对NgModel类的引用
这意味着您可以访问这些类的任何属性/方法，例如nameCtrl.invalid或form.invalid
另请参见：
What is #auto attribute here and why it is required