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

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

1 个答案: