#var ="ngModel"的含义

Question

我正在创建login.component.html,在此期间我创建一个输入字段,然后将其绑定到email我的变量中login.component.ts.最初我写的是:

<input type="text" placeholder="Enter Email" id="email"
       [(ngModel)] = "email" name = "email" required #email="ngModel"/>

但在我将其更改为:

<input type="text" placeholder="Enter Email" id="email"
       [(ngModel)] = "email" name = "email" required #em="ngModel"/>

到底发生了什么#em="ngModel",为什么我只能使用难以置信的特定值？

Answer 1

表单验证文档中提到了您引用的语法,它们解释了:

模板variable(#name)具有值"ngModel"(always ngModel).这将为您提供NgModel 与此控件关联的Angular 指令的引用,您可以在模板中使用该指令来检查控件状态,例如valid和dirty.

问题是你有一个email在你的@Component类上命名的属性和一个在其模板中命名的引用变量email.你不能同时拥有两者,因此你看到错误:

Error: Cannot assign to a reference or variable!

重命名属性或引用变量(在您更改后者的情况下em)修复了问题.您不仅限于"令人难以置信的特定值",您可能已更改为任何不属于属性的有效标识符.

Answer 2

几天前我也遇到了同样的问题，当我对其进行研发时，我发现

 #var="ngModel" exports NgModel into a local variable called "var".

通过这个我们可以检查控制状态，例如valid和dirty和touched