异步跨字段验证器问题：表单需依据其他字段值验证当前字段

针对跨字段验证的需求，这里提供修正后的异步验证器实现，解决原代码仅在第一个下拉框变化时触发验证的问题，同时保证验证逻辑准确：

import { combineLatest, Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { FormControl, ValidationErrors } from '@angular/forms';

validateDropDown(formControl: FormControl): Observable<ValidationErrors | null> {
  const parent = formControl.parent!;
  const firstDD = parent.get("firstDropDown")!;

  // 合并两个控件的变化流，同时触发初始验证
  return combineLatest([
    firstDD.valueChanges.pipe(startWith(firstDD.value)),
    formControl.valueChanges.pipe(startWith(formControl.value))
  ]).pipe(
    map(([firstValue, secondValue]) => {
      // 当第一个下拉框id为1或10时，检查第二个下拉框是否有选中值
      if (firstValue.id === 1 || firstValue.id === 10) {
        return secondValue.length > 0 ? null : { userValid: { valid: false } };
      }
      // 其他情况直接通过验证
      return null;
    })
  );
}

关键修改说明： #

• 双字段触发验证：使用combineLatest合并第一个下拉框和目标下拉框的valueChanges流，无论哪个字段值变化，都会重新执行验证逻辑，解决原代码仅监听第一个下拉框的问题。
• 初始状态验证：通过startWith传入控件当前值，确保组件初始化时就会执行一次验证，避免页面加载时验证规则不生效的情况。
• 简化逻辑写法：直接根据条件返回验证结果，去掉原代码中冗余的isValid变量和嵌套的of调用，符合Angular异步验证器的返回规范。

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