title: Template reference variables: assigning ngForm and ngModel
body: <p>I am learning Angular on Pluralsight and I have a question regarding a course I am taking currently.</p>
  
  <p>I am confused on the reasoning behind template reference variables when they are assigned a value. For example, if you put <code>#name</code> in an <code>&lt;input&gt;</code> tag, I understand name can now reference the input tag and it's associated value. The question I have is regarding decalrations such as <code>#name="ngModel"</code></p>
  
  <p>Looking over the Angular documentation, I found this:</p>
  
  <blockquote>
    <p>You need a template reference variable to access the input box's Angular control from within the template. Here you created a variable called name and gave it the value "ngModel".</p>
  </blockquote>
  
  <p>I also found <a href="https://stackoverflow.com/a/35944965/9617466">this</a> helpful answer to guide me on the right track.</p>
  
  <p>But I am still a bit unclear as to what value assigning the template reference variable <code>ngModel</code> adds.</p>
  
  <p>Part of the form I am currently writing:</p>
  
  <pre><code>&lt;form #form="ngForm" (ngSubmit)="onSubmit(form)"&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="name"&gt;Name&lt;/label&gt;
              &lt;input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name"
                      required #nameField="ngModel"
                      (blur)="onBlur(nameField)"
                      [class.field-error]="form.submitted &amp;&amp; nameField.invalid"&gt;
              &lt;div [hidden]="!form.submitted || nameField.valid"
                  class="alert alert-danger"&gt;
                  Enter a name
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Part of the Typescript file:</p>
  
  <pre><code>@Component({
    selector: 'app-user-settings-form',
    templateUrl: './user-settings-form.component.html',
    styleUrls: ['./user-settings-form.component.css']
  })
  export class UserSettingsFormComponent implements OnInit {
  
    originalUserSettings: UserSettings = {
      name: null,
      emailOffers: null,
      interfaceStyle: null,
      subscriptionType: null,
      notes: null
    };
  
    userSettings: UserSettings = { ...this.originalUserSettings };
  
    constructor() { }
  
    ngOnInit(): void {
  
    }
  </code></pre>
  
  <p>What is the difference between just using <code>#nameField</code> vs using <code>#nameField="ngModel"</code> as well as <code>#form</code> vs <code>#form="ngForm"</code>?</p>