如何在验证器函数内为验证失败的控件设置焦点？

好问题！在Angular的自定义验证器里直接调用原生控件的focus()确实有点棘手——因为ValidatorFn只能拿到AbstractControl实例，没法直接访问DOM元素。不过有几个靠谱的方案能帮你实现需求，我给你拆解一下：

方案1：组件内结合ViewChild + 控件状态监听 #

这是最直接的实现方式，适合单个控件的场景：

1. 先在模板里给表单控件添加模板引用变量：

<input #targetInput formControlName="yourControl">

2. 在组件类中通过ViewChild获取原生DOM元素的引用：

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

// ...
export class YourComponent implements AfterViewInit {
  yourForm!: FormGroup;
  @ViewChild('targetInput') targetInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    // 订阅控件的状态变化
    this.yourForm.get('yourControl')?.statusChanges.subscribe(() => {
      const control = this.yourForm.get('yourControl');
      // 当验证失败（存在numRange错误）时触发焦点
      if (control?.errors?.['numRange']) {
        this.targetInput.nativeElement.focus();
      }
    });
  }
}

这种方式把DOM操作放在组件层，符合Angular关注点分离的原则，逻辑清晰易维护。

方案2：封装成自定义验证指令（更适合复用场景） #

如果这个验证逻辑你要在多个组件里使用，把它封装成指令会更高效，直接把验证和焦点逻辑绑定在一起：

1. 创建自定义指令，注入ElementRef获取原生元素并实现Validator接口：

import { Directive, ElementRef, Input } from '@angular/core';
import { AbstractControl, Validator, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[numRangeValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: NumRangeValidatorDirective, multi: true }]
})
export class NumRangeValidatorDirective implements Validator {
  @Input() min!: number;
  @Input() max!: number;

  constructor(private el: ElementRef<HTMLInputElement>) {}

  validate(control: AbstractControl): { [key: string]: boolean } | null {
    let tempVal;
    try {
      tempVal = typeof control.value === 'number' ? +control.value : +control.value.replace(/[pP]/g, '');
    } catch {}

    if (!control.value) {
      return null;
    }

    if (isNaN(tempVal) || tempVal < this.min || tempVal > this.max) {
      control.setValue('');
      // 直接调用原生元素的focus方法
      this.el.nativeElement.focus();
      return { 'numRange': true };
    }
    return null;
  }
}

2. 在模板中直接使用这个指令：

<input numRangeValidator [min]="1" [max]="100" formControlName="yourControl">

这种方式把所有逻辑封装在指令里，复用性拉满，不用在每个组件里重复写监听代码。

小提醒 #

• 确保调用focus()时DOM元素已经初始化完成（比如用AfterViewInit钩子，或者指令里的逻辑天然在元素初始化后执行）。
• 你在验证器里调用control.setValue('')已经会触发控件的状态变化，所以不需要额外手动触发更新。

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