Angular 5响应式验证：自定义控件比较验证器及保存按钮禁用问题

Got it, let's nail this custom validator to meet your exact requirements. The goal is to only disable the save button when validation fails, and we need to enforce two key rules: start time must be before end time, and both fields are either empty or filled with valid 24-hour (hh:mm) times. Here's how to implement the openCloseTimeValidator properly:

Step 1: Build the Custom Cross-Control Validator #

Since we need to validate two fields together, we'll create a group-level validator. This function checks all your rules sequentially:

import { AbstractControl, ValidationErrors, FormGroup } from '@angular/forms';

export function openCloseTimeValidator(control: AbstractControl): ValidationErrors | null {
  const formGroup = control as FormGroup;
  const startTime = formGroup.get('startTime')?.value?.trim();
  const endTime = formGroup.get('endTime')?.value?.trim();

  // Regex to validate 24-hour hh:mm format (e.g., 08:15, 23:59)
  const timeFormatRegex = /^([01]\d|2[0-3]):([0-5]\d)$/;

  // Rule 1: Both fields empty = valid
  if (!startTime && !endTime) {
    return null;
  }

  // Rule 2: One field filled, one empty = invalid
  if ((!startTime && endTime) || (startTime && !endTime)) {
    return { incompleteTimePair: true };
  }

  // Rule 3: Check if both fields match hh:mm format
  const isStartTimeValid = timeFormatRegex.test(startTime);
  const isEndTimeValid = timeFormatRegex.test(endTime);
  if (!isStartTimeValid || !isEndTimeValid) {
    return { invalidTimeFormat: true };
  }

  // Rule 4: Ensure start time is earlier than end time
  const [startHours, startMins] = startTime.split(':').map(Number);
  const [endHours, endMins] = endTime.split(':').map(Number);
  
  const startTotalMins = startHours * 60 + startMins;
  const endTotalMins = endHours * 60 + endMins;

  if (startTotalMins >= endTotalMins) {
    return { startTimeAfterEndTime: true };
  }

  // All checks passed = valid
  return null;
}

Let's break down the logic:

• We cast the control to a FormGroup because we're validating multiple fields together.
• We handle each validation case step-by-step to return specific error keys (useful for showing user-friendly messages later).
• Converting times to total minutes makes comparing start/end times straightforward and avoids date-related edge cases.

Step 2: Attach the Validator to Your FormGroup #

Add this validator to the form group itself (not individual controls) when initializing your form:

import { FormBuilder, FormGroup } from '@angular/forms';
// Import your validator from its file location

constructor(private fb: FormBuilder) {}

timeForm: FormGroup;

ngOnInit(): void {
  this.timeForm = this.fb.group({
    startTime: [''],
    endTime: ['']
  }, { validators: [openCloseTimeValidator] }); // Bind the group-level validator here
}

Step 3: Disable Save Button Only On Validation Failure #

In your template, bind the button's disabled property to the form's validity state. This ensures the button is only disabled when the form fails validation:

<button type="submit" [disabled]="!timeForm.valid">Save</button>

Optional: Show User-Friendly Error Messages #

If you want to inform users why validation failed, you can check for the specific error keys in your template:

<div class="error-message" *ngIf="timeForm.hasError('incompleteTimePair')">
  Please fill both start and end times, or leave both empty.
</div>
<div class="error-message" *ngIf="timeForm.hasError('invalidTimeFormat')">
  Enter valid 24-hour format (hh:mm) for both times (e.g., 09:30, 22:00).
</div>
<div class="error-message" *ngIf="timeForm.hasError('startTimeAfterEndTime')">
  Start time must be earlier than end time.
</div>

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