Angular 11中添加Form Group验证器不覆盖控件验证器的方法

我在一个包含6个控件的Form Group里，已有3个控件设置了Validators.required验证器，现在想要添加全局表单验证器检查日期区间是否合法，但添加Form Group验证器后，原有控件的验证器失效了。

尝试的两种实现方式 #

1. 先创建表单再调用setValidators：

this.identifierForm = this.formBuilder.group({
    id: [],
    type: [null, Validators.required],
    value: [null, Validators.required],
    validFrom: [],
    validUntil: [],
    authority: [null, Validators.required],
});
this.identifierForm.setValidators(
    FormValidator.dateOrderValidator(
        this.identifierForm,
        'validFrom',
        'validUntil',
        this.i18nService
    )
);

2. 在表单初始化时配置validators参数：

this.identifierForm = this.formBuilder.group(
    {
        id: [],
        type: [null, Validators.required],
        value: [null, Validators.required],
        validFrom: [],
        validUntil: [],
        authority: [null, Validators.required],
    },
    {
        validators: [
            FormValidator.dateOrderValidator('validFrom', 'validUntil', this.i18nService),
        ],
    }
);

两种方式均仅Form Group验证器生效，控件的required验证器被忽略。

日期验证器代码 #

dateOrderValidator(
        startDateFieldName: string,
        endDateFieldName: string,
        i18nService: DngI18nService
    ): ValidatorFn {
        return (formGroup: FormGroup): ValidationErrors | null => {
            resetErrors(formGroup);
            const startDate = formGroup.controls[startDateFieldName]?.value;
            const endDate = formGroup.controls[endDateFieldName]?.value;
            if (Date.parse(startDate) >= Date.parse(endDate)) {
                formGroup.controls[startDateFieldName].setErrors({
                    error: i18nService.instant('invalidDatePeriod') as string,
                });
                formGroup.controls[endDateFieldName].setErrors({
                    error: i18nService.instant('invalidDatePeriod') as string,
                });
                return { error: i18nService.instant('invalidForm') as string };
            }
            return null;
        };
    },

解决方案 #

问题根源在于日期验证器中的resetErrors(formGroup)会清除整个表单组（包括所有子控件）的错误状态，且直接调用setErrors会覆盖控件原有错误（比如required的错误提示）。以下是修正后的验证器代码：

dateOrderValidator(
    startDateFieldName: string,
    endDateFieldName: string,
    i18nService: DngI18nService
): ValidatorFn {
    return (formGroup: FormGroup): ValidationErrors | null => {
        const startCtrl = formGroup.controls[startDateFieldName];
        const endCtrl = formGroup.controls[endDateFieldName];
        const startDate = startCtrl?.value;
        const endDate = endCtrl?.value;

        // 移除之前添加的日期区间错误，保留控件原有错误
        if (startCtrl.errors?.['invalidDatePeriod']) {
            const { invalidDatePeriod, ...remainingErrors } = startCtrl.errors;
            startCtrl.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
        }
        if (endCtrl.errors?.['invalidDatePeriod']) {
            const { invalidDatePeriod, ...remainingErrors } = endCtrl.errors;
            endCtrl.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
        }

        // 检查日期区间合法性
        if (startDate && endDate && Date.parse(startDate) >= Date.parse(endDate)) {
            // 合并原有错误与新的日期区间错误，避免覆盖
            startCtrl.setErrors({
                ...startCtrl.errors,
                invalidDatePeriod: i18nService.instant('invalidDatePeriod') as string
            });
            endCtrl.setErrors({
                ...endCtrl.errors,
                invalidDatePeriod: i18nService.instant('invalidDatePeriod') as string
            });
            return { invalidForm: i18nService.instant('invalidForm') as string };
        }

        return null;
    };
},

关键修改点： #

• 移除resetErrors(formGroup)调用，避免清除所有控件的错误状态
• 修改错误处理逻辑：先移除之前添加的invalidDatePeriod错误，保留控件原有的其他错误（如required）
• 设置新错误时，通过扩展运算符合并原有错误，确保不会覆盖控件自身的验证器错误

另外，两种添加Form Group验证器的方式都可以正常使用，控件验证器失效的核心原因是验证器内部的错误清除逻辑，而非添加方式。

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