如何借助Angular ReactiveForms获取聚焦的表单控件名称

ReactiveForms本身并没有直接提供获取当前聚焦控件名称的内置API，不过可以结合DOM焦点事件和表单控件的关联关系来实现，下面是两种实用的方案：

方案一：模板直接绑定焦点事件（适合简单表单） #

在每个表单控件上绑定focus事件，直接传递对应的控件名称：

<!-- 模板代码 -->
<form [formGroup]="myForm">
  <input formControlName="username" (focus)="setFocusedControl('username')">
  <input formControlName="email" (focus)="setFocusedControl('email')">
  <input formControlName="phone" (focus)="setFocusedControl('phone')">
</form>

// 组件代码
currentFocusedControl: string | null = null;

setFocusedControl(controlName: string) {
  this.currentFocusedControl = controlName;
  // 这里可以做后续逻辑，比如高亮对应控件的提示信息等
}

方案二：自定义指令统一处理（适合复杂表单） #

如果表单控件较多，不想重复写绑定代码，可以自定义一个指令，自动关联FormControlName并监听焦点事件：

// track-focus.directive.ts
import { Directive, HostListener, Optional } from '@angular/core';
import { FormControlName } from '@angular/forms';

@Directive({
  selector: '[trackFocus]'
})
export class TrackFocusDirective {
  constructor(@Optional() private formControlName: FormControlName) {}

  @HostListener('focus')
  onControlFocus() {
    if (this.formControlName?.name) {
      console.log('当前聚焦的控件名称:', this.formControlName.name);
      // 这里可以通过Output事件把控件名称传递给父组件，或者存入服务中
    }
  }
}

使用时只需要给表单控件加上指令即可：

<form [formGroup]="myForm">
  <input formControlName="username" trackFocus>
  <input formControlName="email" trackFocus>
  <input formControlName="phone" trackFocus>
</form>

关键说明 #

焦点状态属于DOM层面的交互状态，ReactiveForms的FormControl实例本身不会跟踪这个信息，所以必须结合DOM的焦点事件来捕获。上面两种方案都能高效获取聚焦控件的名称，根据表单复杂度选择即可。

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