在這個用例中，ngModel 指令究竟是如何工作的？

Question

我是 Angular 的完整初學者，我對NgModel指令及其可能的用例有一些概念上的疑問。

閱讀Angular官方文檔： https://angular.io/api/forms/NgModel

我只能閱讀：

從域 model 創建 FormControl 實例並將其綁定到表單控件元素。

在我看來，這個FormControl應該是一個 object ，其中包含插入到我的表單字段中的值和相關字段狀態（例如用於驗證pourpose）。 這是對的嗎？ 現在我對具體的用例有些懷疑。

所以讓我們做一個例子。

我有這個表格：

<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>

1. 在我的父表單元素上，我有： #form="ngForm" 。 具體說明什么？ 據我所知，它只是將整個表單的引用創建到表單“對象”\引用中。

2. 然后我的表單中有這個輸入字段：

這里ngModel出現了兩次：

為什么我有第一個ngModel ？ 它究竟是什么意思？

第二次出現的是#nameCtrl="ngModel" ，它應該簡單地將這個輸入字段的引用創建到nameCtrl “地址”中。

Answer 1

NgModel指令從域 model 創建一個 FormControl 實例，並將其綁定到表單控件元素。 這是正確的。

在下面的所有示例中，NgModel 指令都應用於輸入元素。

<input name="name" ngModel>

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

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

這意味着對於 Angular 之上的每個元素將創建NgModel class的實例。

在內部，這個 class 包含一個新的 FormControl 實例

 public readonly control: FormControl = new FormControl(); 

如果需要，該值隨后會更新並與 model、輸入元素和 rest 表格同步。

接下來你需要了解的是模板引用變量（#var）

這個變量幫助我們獲取對某個實例的引用：HTMLElement 或 Angular 組件/指令/服務。

模板引用變量可以有一個值#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 的引用

這意味着您可以訪問這些類的任何屬性/方法，例如nameCtrl.invalid或form.invalid

也可以看看：

• 這里的#auto 屬性是什么以及為什么需要它