Meaning of #var="ngModel"

Question

I am creating login.component.html and during that time I create an input field then bind it to the email variable found in my login.component.ts. Originally I had written it as:

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

but continued to receive errors until I changed it to:

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

What exactly is going on at #em="ngModel" and why can I only use incredibly specific values?

Answer 1

The syntax you refer to is mentioned in the form validation docs, where they explain:

The template variable (#name) has the value "ngModel" (always ngModel). This gives you a reference to the Angular NgModel directive associated with this control that you can use in the template to check for control states such as valid and dirty.

The problem is that you have a property named email on your @Component class and a reference variable named email in its template. You cannot have both, hence the error you see:

Error: Cannot assign to a reference or variable!

Renaming either the property or the reference variable (in your case you changed the latter to em) fixes the problem. You're not limited to "incredibly specific values", you could have changed to any valid identifier that wasn't also a property.

Answer 2

I have the same issue few days back ,when I did R&D on it then i found that

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

Through this we can check control states such as valid and dirty and touched