Angular中updateValueAndValidity()使用问题：多位数验证异常

核心问题：字符串与数值的类型不匹配 #

你的自定义验证器直接使用表单控件的原始值进行比较，但Angular表单控件默认返回字符串类型的值。当比较多位数时，会按照字符串的字典序（逐字符对比ASCII码）而非数值大小判断，这就导致了异常行为：

• min=23（值为字符串"23"）和max=3（值为字符串"3"）对比时，会先比较第一个字符"2"和"3"，因为"2"的ASCII码小于"3"，所以判定"23" < "3"，验证器返回null（无错误），这和预期的数值逻辑不符。
• 单数字场景下，字符串和数值的比较结果刚好一致，所以表现正常。

修复方案 #

1. 修改自定义验证器，统一转换为数值类型比较 #

将minValue和maxValue转换为数值后再进行大小判断，同时处理max为空的边界情况：

export function maxValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        const minControl = (control.parent as FormGroup)?.get("min");
        if (!minControl) return null;
        
        // 转换为数值，空值或非数字转为NaN
        const minValue = Number(minControl.value);
        const maxValue = Number(control.value);
        
        // 处理max为空或非数字的情况，可根据业务需求调整逻辑
        if (isNaN(maxValue)) {
            return control.value ? { maxValid: true } : null;
        }
        
        // 基于数值大小的比较逻辑
        return maxValue >= minValue ? null : { maxValid: true };
    };
}

2. 优化表单初始化逻辑 #

ngOnChanges会在组件输入属性变化时触发，每次触发都添加控件会导致重复注册，建议改为在ngOnInit中初始化表单：

ngOnInit(): void {
    this.form = this.formBuilder.group({
        min: [1, Validators.required],
        max: ['', maxValidator()]
    });

    this.form.controls['min'].valueChanges.subscribe(() => {
        // 添加emitEvent: false避免触发不必要的valueChanges循环
        this.form.controls['max'].updateValueAndValidity({ emitEvent: false });
    });
}

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