Angular2中如何从FormControl对象动态获取输入框属性值？

嘿，我明白你现在的困惑——用jQuery取个DOM属性超顺手，但到了Angular响应式表单这里就有点摸不着头脑了对吧？别担心，我给你两种实用的方法来动态获取输入框的name属性值：

方法1：通过模板引用变量 + @ViewChild 获取单个输入框的name属性 #

这种方法适合你明确知道要获取哪个输入框的场景，步骤很简单：

1. 在模板里给输入框加一个模板引用变量（比如#nameInput）：

<input formControlName="name" #nameInput id="foo" type="text" name="foo">

2. 在组件类里导入必要的依赖并获取元素：
   先导入ViewChild、ElementRef和生命周期钩子AfterViewInit，然后通过@ViewChild拿到模板引用对应的DOM元素，最后在视图初始化完成后获取name属性：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 初始化响应式表单
  myForm = new FormGroup({
    name: new FormControl('')
  });

  // 通过模板引用变量获取输入框元素
  @ViewChild('nameInput') nameInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit(): void {
    // 视图初始化完成后，安全获取name属性
    const inputName = this.nameInput.nativeElement.getAttribute('name');
    console.log(inputName); // 控制台会输出 "foo"
  }
}

为什么用ngAfterViewInit？因为要确保Angular已经把DOM渲染完成，此时才能拿到有效的元素引用。

方法2：遍历表单控件批量获取name属性 #

如果你有多个表单输入框，想一次性获取所有输入框的name属性，可以用@ViewChildren来获取所有表单控件对应的DOM元素：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { NgControl, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  myForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    phone: new FormControl('')
  });

  // 获取所有表单控件的引用
  @ViewChildren(NgControl) formControls!: QueryList<NgControl>;

  ngAfterViewInit(): void {
    // 遍历每个控件，获取对应的输入框name属性
    this.formControls.forEach(control => {
      // 从控件的valueAccessor中拿到DOM元素引用
      if (control.valueAccessor && (control.valueAccessor as any)._elementRef) {
        const inputElement = (control.valueAccessor as any)._elementRef.nativeElement as HTMLInputElement;
        const inputName = inputElement.getAttribute('name');
        console.log(`控件${control.name}的name属性是：${inputName}`);
      }
    });
  }
}

小提醒 #

Angular里更推荐通过数据绑定来处理业务逻辑，尽量避免直接操作DOM，但如果确实需要获取DOM属性，上面的两种方法都是符合Angular规范的～

内容的提问来源于stack exchange，提问作者Parvesh kumar