Angular 2+自定义指令中获取元素属性返回undefined问题求助

嘿，我太懂你这个困扰了——之前我也踩过这个坑！你直接通过ElementRef读取宿主元素的formControlName属性返回undefined，核心原因是Angular的formControlName不是原生DOM元素的property，而是Angular表单指令的输入绑定，原生DOM里根本不存在这个property，所以直接读肯定拿不到。

下面给你两种靠谱的解决方法，按需选择：

方法1：直接读取HTML Attribute（仅获取字符串值） #

如果你只是需要formControlName的字符串名称，直接用原生DOM的getAttribute()方法就行，因为你在模板里写的formControlName="xxx"会作为HTML attribute存在于元素上：

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';

@Directive({ selector: '[appInputMod]' })
export class InputModDirective implements OnInit {
  constructor(public renderer: Renderer2, public hostElement: ElementRef) { }
  
  ngOnInit() {
    // 读取formControlName的attribute值
    const controlName = this.hostElement.nativeElement.getAttribute('formControlName');
    console.log('formControlName:', controlName); // 这下就能拿到正确的值了
    
    // 接下来你可以根据controlName添加属性，比如：
    if (controlName === 'email') {
      this.renderer.setAttribute(this.hostElement.nativeElement, 'placeholder', '请输入邮箱');
    }
  }
}

方法2：注入NgControl（推荐，关联表单控件实例） #

如果你不仅需要名字，还要和对应的FormControl实例交互（比如验证状态、值变化监听），那直接注入NgControl是最Angular化的方式——formControlName指令就是基于NgControl实现的：

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms'; // 别忘了导入这个

@Directive({ selector: '[appInputMod]' })
export class InputModDirective implements OnInit {
  // 注入NgControl
  constructor(
    public renderer: Renderer2, 
    public hostElement: ElementRef,
    private ngControl: NgControl
  ) { }
  
  ngOnInit() {
    // 获取formControlName的名称
    const controlName = this.ngControl.name;
    console.log('formControlName:', controlName);
    
    // 还能直接拿到对应的FormControl实例，做更多操作
    const formControl = this.ngControl.control;
    if (formControl) {
      console.log('当前控件值:', formControl.value);
      // 监听值变化
      formControl.valueChanges.subscribe(value => {
        console.log('控件值变化:', value);
      });
    }
  }
}

注意事项 #

用NgControl的话，要确保你的指令所在的模块已经导入了ReactiveFormsModule（因为formControlName属于响应式表单模块），否则会出现注入失败的错误。

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