title: How to get ElementRef reference from NgModel FormControl in NgForm in Angular 4+
body: <p>In Angular 4+, I've following template driven form:</p>
  
  <pre><code>&lt;form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" &gt;
    &lt;div class="form-group"&gt;
      &lt;label for="item_name"&gt;Item Name&lt;/label&gt;
      &lt;input id="item_name" name="item_name" [(ngModel)]="itemName" 
            #item_name="ngModel" autofocus class="form-control"
            required minlength="4" maxlength="20" 
            aria-describedby="itemNameHelpBlock"&gt;
      &lt;small *ngIf="(item_name.invalid &amp;&amp; item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" &gt;
        Value must be at least 4 characters and must not exceed 20 characters
      &lt;/small&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="item_type"&gt;Item Type&lt;/label&gt;
      &lt;input id="item_type" name="item_type" [(ngModel)]="itemType" 
           #item_type="ngModel" class="form-control" required minlength="2"
            maxlength="20" aria-describedby="itemTypeHelpBlock"&gt;
      &lt;small *ngIf="(item_type.invalid &amp;&amp; item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" &gt;
        Value must be at least 2 characters and must not exceed 20 characters
      &lt;/small&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-output-primary btn-lg" [disabled]="!addForm.form.valid"&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the component section, I want to access the form field (ie <code>item_name</code>, <code>item_type</code>) as <code>ElementRef</code> so that I can access their corresponding <code>DOM</code> element through the <code>nativeElement</code> method of <code>ElementRef</code> class. </p>
  
  <p>I've tried with <code>@ViewChild</code> but, it returns <code>NgModel</code> class object:</p>
  
  <pre><code>  @ViewChild('item_name') item_name: ElementRef;
  
    ngAfterViewInit() {
      console.log(this.item_name); // it returns NgModel class object
    }
  </code></pre>
  
  <p>But, I need to access the DOM <code>HTMLElement</code> of <code>#item_name</code> form field so that I can reset document focus to <code>#item_name</code> input field after every form submission. Now, I don't know how I can do it without directly accessing the DOM and I don't wanna directly access the DOM via DOM api.</p>
  
  <p>I would be glad if I get some help here.</p>