谁能解释为什么我们需要 ngModel 和 #nameField="ngModel" 都在 angular6 形式的同一个输入字段中？

Question

我从 angular6 开始，我遇到了下面的语法。

<input type="text" 
    class="form-control" 
    name="company-name"
    ngModel
    #nameField="ngModel"
    required
    minlength="3">

现在我的问题是 ngModel 和 name 是否已经存在以唯一标识表单组件和 ngModel 指令将其与 angular 表单绑定为什么我们需要 #nameField="ngModel"?

我们可以从 name="company-name" 获得输入值。那为什么是 2 NgModels?

#nameField="ngModel"和[(ngModel)]="nameField"有什么区别？

Answer 1

要创建有效的模板驱动表单控件 - 您只需添加 name="company-name" 和 ngModel.

模板引用 #nameField="ngModel" 可用作您 html 中的变量（因此它是可选的）。

[(ngModel)]="nameField" 是 Angular 中的双向数据绑定，又名 "banana-box"（有关更详细的解释，请阅读这篇文章 two-way-data-binding-in-angular-2 or the official documentation NgModel）

Answer 2

我一直认为它也需要用于验证目的，所以错误消息很好地显示在控件下方。

谁能解释为什么我们需要 ngModel 和 #nameField="ngModel" 都在 angular6 形式的同一个输入字段中？

can anyone explain why we need ngModel and #nameField="ngModel" both in same input field of angular6 forms?

angular6

angular-forms