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

在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

表单字段的DOM

HTMLElement

，以便在每次表单提交后将文档焦点重置为

#item_name

输入字段。现在，我不知道如果不直接访问DOM我怎么做，我也不想通过DOM api直接访问DOM

---

如果我能在这里得到一些帮助，我将非常高兴。

在您的HTML中，不要将模板引用

\item\u name

指向

ngModel

，只需将其留空，如下所示：

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

我注意到，您的提交按钮中有一个输入错误：在

禁用
属性之前缺少打开“[”

Plunker:
为了给出一个用例，您可以将
#item_name
指向
ngModel
以访问模型本身的一些属性，例如，如果它当前被认为是有效的

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

Angular并不抱怨在一个字段上有多个引用（就我测试的情况而言）
我只需将
read
选项添加到
ViewChild
查询：

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


另见



但是，我不能这样做，因为我需要使用
NgForm
的模板驱动输入字段验证，比如
required
，
minlength
，并且需要检查
item\u name.invalid
，
item\u name.toucted
等。实际上，您可以通过它的根NgForm指令（）和元素的名称。
this.addForm.form.get（'item_name'）
将为您获取一个元素，您甚至可以使用像
this.addForm.form.get（'item_type'）.disable（）这样的反应式表单API
。您还可以按照Benedict的建议添加其他空模板参考。我更新了我的plunker，单击“焦点”按钮reat！它就像一个符咒一样有效。非常感谢@Benedikt.Nice！这也有效。谢谢。这是更标准的方法。
<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>

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

@ViewChild('itemNameField') itemNameField: ElementRef;

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