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

Question

在Angular 4+中,我遵循模板驱动的形式:

<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>

在组件部分,我要访问的表单字段(即item_name,item_type),为ElementRef使我可以访问它们相应的DOM通过该元件nativeElement的方法ElementRef类.

我试过@ViewChild但是,它返回了NgModel类对象:

  @ViewChild('item_name') item_name: ElementRef;

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

但是,我需要访问表单字段的DOM HTMLElement,#item_name以便我可以#item_name在每个表单提交后将文档焦点重置为输入字段.现在,我不知道如何在不直接访问DOM的情况下做到这一点,我不想通过DOM api直接访问DOM.

如果我在这里得到一些帮助,我会很高兴的.

Answer 1

我只想添加查询read选项ViewChild:

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

Stackblitz示例

也可以看看

• 如何在Angular 2中获得与ElementRef相关的组件的引用