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

FormControl

关注

发信

关注(28)粉丝(399)

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

本文介绍了如何从 Angular 4+ 中的 NgForm 中的 NgModel FormControl 获取 ElementRef 引用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在 Angular 4+ 中，我使用了以下模板驱动的表单:

<form #addForm="ngForm" (ngSubmit)="onFormSubmit($event, addForm)" ><div class="form-group"><label for="item_name">项目名称</label><input id="item_name" name="item_name" [(ngModel)]="itemName"#item_name="ngModel" autofocus class="form-control"要求 minlength="4" maxlength="20"aria-scribedby="itemNameHelpBlock"><small *ngIf="(item_name.invalid && item_name.touched)" id="itemNameHelpBlock" class="form-text text-error" >值必须至少为 4 个字符且不得超过 20 个字符</小>

<div class="form-group"><label for="item_type">项目类型</label><input id="item_type" name="item_type" [(ngModel)]="itemType"#item_type="ngModel" class="form-control" required minlength="2"maxlength="20" aria-描述的="itemTypeHelpBlock"><small *ngIf="(item_type.invalid && item_type.touched)" id="itemTypeHelpBlock" class="form-text text-error" >值必须至少为 2 个字符且不得超过 20 个字符</小>

<button class="btn btn-output-primary btn-lg" [disabled]="!addForm.form.valid">添加</button></表单>

在组件部分，我想以 ElementRef 访问表单字段(即 item_name、item_type)，以便我可以访问它们通过ElementRef类的nativeElement方法对应DOM元素.

我已经尝试过 @ViewChild 但是，它返回 NgModel 类对象:

 @ViewChild('item_name') item_name: ElementRef;ngAfterViewInit() {console.log(this.item_name);//它返回 NgModel 类对象}

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

如果我能在这里得到帮助，我会很高兴.

解决方案

我会简单地将 read 选项添加到 ViewChild 查询:

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

Stackblitz 示例

另见

如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

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.

解决方案

I would simply add read option to ViewChild query:

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

Stackblitz Example