How to get ElementRef reference from NgModel FormControl in NgForm in Angular 4+

Question

In Angular 4+, I've following template driven form:

<form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" >
  <div class="form-group">
    <label for="item_name">Item Name</label>
    <input id="item_name" name="item_name" [(ngModel)]="itemName" 
          #item_name="ngModel" autofocus class="form-control"
          required minlength="4" maxlength="20" 
          aria-describedby="itemNameHelpBlock">
    <small *ngIf="(item_name.invalid && item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" >
      Value must be at least 4 characters and must not exceed 20 characters
    </small>
  </div>
  <div class="form-group">
    <label for="item_type">Item Type</label>
    <input id="item_type" name="item_type" [(ngModel)]="itemType" 
         #item_type="ngModel" class="form-control" required minlength="2"
          maxlength="20" aria-describedby="itemTypeHelpBlock">
    <small *ngIf="(item_type.invalid && item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" >
      Value must be at least 2 characters and must not exceed 20 characters
    </small>
  </div>
  <button class="btn btn-output-primary btn-lg" [disabled]="!addForm.form.valid">Add</button>
</form>

In the component section, I want to access the form field (ie item_name, item_type) as ElementRef so that I can access their corresponding DOM element through the nativeElement method of ElementRef class.

I've tried with @ViewChild but, it returns NgModel class object:

  @ViewChild('item_name') item_name: ElementRef;

  ngAfterViewInit() {
    console.log(this.item_name); // it returns NgModel class object
  }

But, I need to access the DOM HTMLElement of #item_name form field so that I can reset document focus to #item_name 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.

I would be glad if I get some help here.

Youmans

Answer 1

I would simply add read option to ViewChild query:

@ViewChild('item_name', { read: ElementRef }) item_name: ElementRef;
                           ^^^^^^^^^^^^^^^

Stackblitz Example

See also

• How to get reference of the component associated with ElementRef in Angular 2

Term

Nice! This also works. Thanks. This is more standard way. – Youmans

Answer 2

Just to give a use case, you can point #item_name to ngModel to access some attributes of the model itself, for example if it's currently considered valid.

<input id="item_name" name="item_name" [(ngModel)]="itemName" #item_name="ngModel" 
    autofocus class="form-control">
<!-- here's where you can access the attributes if it's pointed to ngModel-->
<small [hidden]="password.valid">
  The item name is not valid
</small>

If you don't need this rather fancy stuff, you can just remove it, as Andriy proposed. Then it's working out of the box with no further changes.

If you need to keep it however, you can give your input field an additional reference which you can use to get the ElementRef.

<input id="item_name" name="item_name" [(ngModel)]="itemName"
   #item_name="ngModel" #itemNameField autofocus class="form-control">

You just have to reference the one that is not pointing to ngModel.

@ViewChild('itemNameField') itemNameField: ElementRef;

Angular does not complain about having multiple references on one field (as far as I tested it)

Federica

Great! It works like a charm. Thanks a lot @Benedikt. – Youmans

Answer 3

In your HTML, do not point template reference #item_name to ngModel, just leave it empty like:

<div class="form-group">
  <label for="item_name">Item Name</label>
  <input id="item_name" 
         class="form-control"
         name="item_name" 
         [(ngModel)]="itemName" 
         #item_name 
         autofocus>
</div>

then, you can access DOM element using @ViewChild decorator (as you did) like:

this.item_name.nativeElement,

I noticed, you have a typo in your submit button: opening '[' is missing just before disabled property.

Plunker: https://plnkr.co/edit/XHqOiEBmuFrA3slZSlrD?p=preview

Jemmy

But, I can't do that because I need to use template driven Input Field validation of NgForm, like required, minlength and need to check item_name.invalid , item_name.touched etc. – Youmans

actually, you can access all your form elements via its root ngForm directive (angular.io/guide/forms#ngForm) and element's name. this.addForm.form.get('item_name') will get you an element, You can even use reactive forms API like this.addForm.form.get('item_type').disable(). You also can additional empty template reference as suggested Benedict. I updated my plunker, click 'Focus' button – Jemmy