Angular2 forms - binding to variable

Question

currently I am working on contact form with Angular2. I am using template driven form. I am wondering what is a proper way to bind variable for ?

  <input type="text" #varName class="form-control" name="Name" ngModel required
                 minlength="4" maxlength="10">
           <p>{{varName.className}}</p>
          <div *ngIf="varName.errors && (varName.pristine || varName.touched)"
                  class="alert alert-danger">
                  <div [hidden]="!varName.errors.required">
                  Name is required
                  </div>
                  <div [hidden]="!varName.errors.minlength">
                  Name must be at least 4 characters long.
                  </div>
                  <div [hidden]="!varName.errors.maxlength">
                  Name cannot exceed 10 characters.
                  </div>
    </div>

That way (using #varName) I can get informations here:

 <p>{{varName.className}}</p>

but Validation is not working, nothing appeared.

Another way (using #varname="ngModel") validation is working, but

<p>{{varName.className}}</p>

shows nothing.

Can you explain me how it works? I can't find proper information about it.

Here is useful explanation https://stackoverflow.com/questions/45250259/what-is-auto-attribute-here-and-why-it-is-required/45251464#45251464 — yurzui, Aug 04 '17 at 09:24
With `#varName` you will get `HTMLInputElement` while with `#varname="ngModel"` instance of `NgModel` directive. There is not `className` property in `NgModel` class https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L111 — yurzui, Aug 04 '17 at 09:38

Angular2 forms - binding to variable

0 Answers0