有人可以用 Angular 形式向我解释这个语法 #name="ngModel"

Question

我使用 Angular 创建了一个模板表单，我想在字段不正确时显示一条消息。

这是输入：

<input type="text" id="task-libelle" name="libelle" class="form__input" ngModel required>

这是错误消息：

<p class="error-message" *ngIf="libelle.invalid || libelle.pristine">This field must not be empty</p>

像这样，我收到一条错误消息，告诉我“libelle”在类型“MyComponent”上不存在。

为了让它工作，我必须添加 ngModel #libelle="ngModel"

<input type="text" id="task-libelle" name="libelle" class="form__input" ngModel #libelle="ngModel" required>

但我不知道为什么以及究竟做了什么 #libelle="ngModel" 和 ngModel 属性仍然在这里（如果我删除 ngModel 属性，我收到错误 NG8003：没有找到指令 exportAs 'ngModel').

有人可以给我解释一下吗？

Answer 1

<input #libelle ...> 将创建一个名为 libelle 的局部变量，它提供对 HTML 模板中数据绑定和事件绑定表达式中的 input 元素实例的访问

<input ngModel #libelle="ngModel" ...> 做几乎相同的事情，除了它提供对 ngModel 指令而不是 input 元素的访问。

一般语法是#localvar[="directiveName"].

Answer 2

#name 是模板参考。

您现在可以在模板中将其用作表示 html 元素的对象：

<div #name> 123 </div>
<p> {{ name.innerHTML }} </p>

如果你想要 html 元素，那很好用。

在模板表单中，您更愿意获取 FormControl 的引用以便能够读取表单控件的状态。您可以使用 #name="ngModel"

  <input #name="ngModel" type="text" name="required" required />
  <p> is control valid: {{ name.valid }} </p>

在上面的示例中，我们有一个带有 required 验证器的输入。只要不包含任何文本，该元素将被视为无效。

Can someone explain me this syntax in Angular form #name="ngModel"