can anyone explain why we need ngModel and #nameField="ngModel" both in same input field of angular6 forms?

Question

I am starting with my angular6 and I come across the syntax below.

<input type="text" 
    class="form-control" 
    name="company-name"
    ngModel
    #nameField="ngModel"
    required
    minlength="3">

now my question is if ngModel and name is already there to uniquely identify form component and ngModel directive to bind it with angular form why we need #nameField="ngModel"?

We can have input value from name="company-name". so why 2 NgModels?

and what is the difference between #nameField="ngModel" and [(ngModel)]="nameField"?

Answer 1

To create a valid template-driven form control - you only have to add name="company-name" and ngModel.

The template reference #nameField="ngModel" can be used as a variable in your html (so it's optional).

[(ngModel)]="nameField" is the two-way data binding in Angular, aka "banana-box" (for more detailed explanation read this article two-way-data-binding-in-angular-2 or the official documentation NgModel )