ngModel 指令在这个用例中究竟是如何工作的？

Question

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

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

我只能阅读：

Creates a FormControl instance from a domain model and binds it to a form control element.

在我看来，这个 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[=49 中创建此输入字段的引用=] "address".

Answer 1

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

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

<input name="name" ngModel>

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

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

表示Angular上面的每个元素都会创建一个NgModel class的实例。

内部这个 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 class
#nameCtrl="ngModel" 持有对 NgModel class

这意味着您可以访问 class 中的任何 properties/methods，例如 nameCtrl.invalid 或 form.invalid

另请参阅：

ngModel 指令在这个用例中究竟是如何工作的？

How exactly works ngModel directive in this use case?

angular-ngmodel

angular-directive

angular