Angular自定义表单验证：页面加载时必填字段无法保留焦点

你的自定义验证器存在几个核心问题，直接导致页面加载时必填字段无法正常保留焦点：

• 重复订阅valueChanges：每次验证器执行都会重新订阅控件的valueChanges，不仅造成内存泄漏，还会多次触发验证逻辑干扰焦点状态。
• 初始化验证缺失：页面加载时没有主动触发一次验证，必填字段的错误状态没正确初始化，进而影响焦点行为。
• 错误清除逻辑覆盖原生必填错误：clearErrorsExcept直接把非目标控件的错误设为null，会清空必填字段的required错误，导致焦点判断异常。

import { AbstractControl, FormGroup, ValidatorFn } from "@angular/forms";

function validateActiveHoursStartEndTimes(
  maximumActiveHoursKey: string,
  activeHoursStartTimeKey: string,
  activeHoursEndTimeKey: string
): ValidatorFn {
  let isSubscribed = false; // 标记是否已完成订阅，避免重复绑定
  let lastChangedControl: AbstractControl;

  return (group: FormGroup): { [key: string]: unknown } | null => {
    // 仅首次运行时订阅valueChanges
    if (!isSubscribed) {
      const startControl = group.controls[activeHoursStartTimeKey];
      const endControl = group.controls[activeHoursEndTimeKey];
      const maxControl = group.controls[maximumActiveHoursKey];

      startControl?.valueChanges.subscribe(() => {
        lastChangedControl = startControl;
        updateValidation(group);
      });

      endControl?.valueChanges.subscribe(() => {
        lastChangedControl = endControl;
        updateValidation(group);
      });

      maxControl?.valueChanges.subscribe(() => {
        lastChangedControl = maxControl;
        updateValidation(group);
      });

      // 页面加载时主动触发一次初始化验证
      updateValidation(group);
      isSubscribed = true;
    }

    return null;
  };

  function updateValidation(formGroup: FormGroup): void {
    const maximumActiveHours = formGroup.controls[maximumActiveHoursKey]?.value as number;
    const activeHoursStartTime = formGroup.controls[activeHoursStartTimeKey]?.value as number;
    let activeHoursEndTime = formGroup.controls[activeHoursEndTimeKey]?.value as number;

    if (activeHoursEndTime < activeHoursStartTime) {
      activeHoursEndTime += 24;
    }

    // 先保存原生必填错误状态，避免被清除
    const startHasRequiredError = formGroup.controls[activeHoursStartTimeKey]?.hasError('required');
    const endHasRequiredError = formGroup.controls[activeHoursEndTimeKey]?.hasError('required');
    const maxHasRequiredError = formGroup.controls[maximumActiveHoursKey]?.hasError('required');

    if (maximumActiveHours !== null && maximumActiveHours !== undefined) {
      if (activeHoursEndTime - activeHoursStartTime > maximumActiveHours) {
        clearCustomErrorsExcept(formGroup, lastChangedControl);
        // 只有控件无必填错误时，才设置自定义验证错误
        if (!maxHasRequiredError) {
          formGroup.controls[maximumActiveHoursKey]?.setErrors({ 'activeHoursOutOfRange': true });
        }
      } else {
        clearCustomErrorsExcept(formGroup, null);
      }
    }

    // 恢复原生必填错误
    if (startHasRequiredError) {
      formGroup.controls[activeHoursStartTimeKey]?.setErrors({ required: true });
    }
    if (endHasRequiredError) {
      formGroup.controls[activeHoursEndTimeKey]?.setErrors({ required: true });
    }
    if (maxHasRequiredError) {
      formGroup.controls[maximumActiveHoursKey]?.setErrors({ required: true });
    }
  }

  // 只清除自定义错误，保留原生的required错误
  function clearCustomErrorsExcept(formGroup: FormGroup, exceptControl: AbstractControl | null): void {
    Object.values(formGroup.controls).forEach(control => {
      if (control !== exceptControl) {
        const currentErrors = control.errors;
        if (currentErrors) {
          // 删除自定义错误，保留必填错误
          delete currentErrors['activeHoursOutOfRange'];
          control.setErrors(Object.keys(currentErrors).length > 0 ? currentErrors : null);
        }
      }
    });
  }
}

在组件中添加逻辑，确保页面加载或表单验证状态变化时，自动聚焦到第一个未填写的必填字段：

模板部分 #

<form [formGroup]="activeHoursForm">
  <select formControlName="activeHoursStartTime">
    <!-- 下拉选项 -->
  </select>
  <select formControlName="activeHoursEndTime">
    <!-- 下拉选项 -->
  </select>
  <input type="range" formControlName="maximumActiveHours">
</form>

组件类部分 #

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

@Component({
  // 组件元数据
})
export class ActiveHoursComponent implements AfterViewInit {
  activeHoursForm: FormGroup;

  ngAfterViewInit(): void {
    // 页面加载完成后检查并聚焦第一个必填错误字段
    this.focusFirstRequiredErrorField();

    // 监听表单状态变化，错误出现时自动聚焦
    this.activeHoursForm.statusChanges.subscribe(() => {
      this.focusFirstRequiredErrorField();
    });
  }

  private focusFirstRequiredErrorField(): void {
    // 筛选出有必填错误且无效的控件
    const requiredInvalidControls = Object.values(this.activeHoursForm.controls)
      .filter(ctrl => ctrl.hasError('required') && !ctrl.valid);

    if (requiredInvalidControls.length > 0) {
      // 找到第一个对应控件的DOM元素并聚焦
      const firstCtrlName = Object.keys(this.activeHoursForm.controls).find(key => 
        this.activeHoursForm.controls[key] === requiredInvalidControls[0]
      );
      if (firstCtrlName) {
        const element = document.querySelector(`[formControlName="${firstCtrlName}"]`) as HTMLElement;
        element?.focus();
      }
    }
  }
}

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