In this example why is the value of the template variable "ngModel"

Question

In this example, I see the explanation but im still not sure i understand why in this case the #name template variable is set to "ngModel". What if there were 2 or 3 other input fields with template variables, would you also set their value to "ngModel"?

https://angular.io/guide/forms#show-and-hide-validation-error-messages

<label for="name">Name</label>
<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name"
       #name="ngModel">
<div [hidden]="name.valid || name.pristine"
     class="alert alert-danger">
  Name is required
</div>

https://stackoverflow.com/questions/45250259/what-is-auto-attribute-here-and-why-it-is-required `exportAs is a name under which the component instance is exported in a template` — yurzui, Sep 30 '17 at 17:52

score 1 · Accepted Answer · answered Sep 30 '17 at 17:54

1

ngModel is the NgModel directive's selector which you need to set to activate it. By setting #name="ngModel" you export the directive into the local variable with ngModel key. And each input can have it's own export, i.e.

...
<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name"
       #name="ngModel">
...
<input type="text" class="form-control" id="lastname"
       required
        [(ngModel)]="model.lastname" name="lastname"
        #lastname="ngModel">

answered Sep 30 '17 at 17:54

Vega

27,856
27
95
103

Hi @Vega, what all features does the template reference variable provide when we assign ngModel to it? Example: touched, invalid, dirty, pristine. Any thing else? – variable Dec 09 '18 at 09:07
@variable .value, .focus(), blur(), etc... anything that you would get for getElementbyId() – Vega Dec 09 '18 at 09:25
How to access these in the class file? – variable Dec 09 '18 at 09:41
@variable There is '@ViewChild' property decorator – Vega Dec 09 '18 at 09:52
Ok or we can also pass it via click even am I right? – variable Dec 09 '18 at 09:57
Do you mean something like: "...(click)='doSomethingWith(myVariable.value)'"? Then yes – Vega Dec 09 '18 at 10:15
Thank you. Or even (click)=doSomethingWith(myVariable) and then in the class access myVariable.value... I am new to all this. Thanks. – variable Dec 09 '18 at 14:54
@variable yw :) – Vega Dec 09 '18 at 15:34

In this example why is the value of the template variable "ngModel"

1 Answers1