如何从Angular 4+中的NgForm中的NgModel FormControl获取ElementRef引用

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.

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

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)

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