Angular 7响应式表单自定义交叉验证失效问题排查

Let's break down what's going wrong and how to fix it:

Root Cause of the Problem #

Your custom validator sets an error on the fined_attendance and ldo_payment controls when the conditions fail, but it never clears those errors when the conditions are resolved. Additionally, using setErrors({ customRangeValidator: true }) overwrites all existing validation errors (like required or min/max) which is not ideal.

When you change allowed_attendance back to 70 (making fined_attendance valid again), the validator runs but doesn't do anything to remove the previously set error—so the error stays visible until you manually re-enter the value.

Fixed Custom Validator Code #

Here's the corrected validator that handles clearing errors and preserves existing validation rules:

export function customRangeValidator(group: FormGroup) {
  const date1 = group.get('ldo_form_fill_up');
  const date2 = group.get('ldo_payment');
  const attd1 = group.get('allowed_attendance');
  const attd2 = group.get('fined_attendance');

  // Handle attendance validation (fined_attendance < allowed_attendance)
  if (attd1.value !== null && attd2.value !== null) {
    if (attd2.value >= attd1.value) {
      // Add custom error while keeping existing errors (required, min, max)
      attd2.setErrors({ ...attd2.errors, customRangeValidator: true });
    } else {
      // Remove custom error if it exists, retain other errors
      if (attd2.errors?.customRangeValidator) {
        const { customRangeValidator, ...remainingErrors } = attd2.errors;
        attd2.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
      }
    }
  }

  // Handle date validation (ldo_payment > ldo_form_fill_up)
  if (date1.value && date2.value) {
    if (date1.value >= date2.value) {
      date2.setErrors({ ...date2.errors, customRangeValidator: true });
    } else {
      if (date2.errors?.customRangeValidator) {
        const { customRangeValidator, ...remainingErrors } = date2.errors;
        date2.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
      }
    }
  }

  return null;
}

Key Improvements Made #

1. Clear Errors When Conditions Are Met: When fined_attendance is again less than allowed_attendance (or the date condition is fixed), we explicitly remove the customRangeValidator error from the control.
2. Preserve Existing Errors: Using the spread operator (...attd2.errors) ensures we don't overwrite validation errors from built-in validators like required, min, or max.
3. Safe Value Checks: We add checks to ensure we only compare values when they exist (prevents null/undefined comparison issues).
4. Robust Control Access: Using group.get() instead of group.controls is more maintainable if your form structure changes later.

Optional HTML Improvement #

To make your error messages more specific (instead of showing the same message for all invalid states), update your mat-error elements:

<!-- For fined_attendance -->
<mat-error *ngIf="fined.hasError('required')">This field is required</mat-error>
<mat-error *ngIf="fined.hasError('min') || fined.hasError('max')">Value must be 0-100</mat-error>
<mat-error *ngIf="fined.hasError('customRangeValidator')">This value must be less than allowed attendance</mat-error>

<!-- For ldo_payment -->
<mat-error *ngIf="ldo_payment.hasError('required')">This field is required</mat-error>
<mat-error *ngIf="ldo_payment.hasError('customRangeValidator')">This date must be greater than the above</mat-error>

This ensures users get precise feedback about what's wrong with their input.

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