Angular表单控件验证配置咨询：如何实现同步验证始终触发、异步验证仅在失焦（blur）时触发

Got it, let's break this down for you! The problem with your current configuration is that setting updateOn: 'blur' at the FormControl level applies to both synchronous and asynchronous validators—which is why your sync validators (like Validators.required) are only firing on blur too.

To split their behavior (sync validators always trigger on value change, async only on blur), we need to decouple the two validation types. Here's how to do it properly:

Solution: Manual Async Validation on Blur #

This approach keeps sync validators running on every value change (the default behavior) and triggers async validation explicitly only when the input loses focus.

Step 1: Adjust the FormControl Configuration #

Remove the global updateOn: 'blur' setting and keep only your sync validators in the validators array. The async validator won't be added to the FormControl directly—we'll handle it via a blur event:

email: new FormControl(null, {
  validators: [Validators.required, this.isRestrictedEmail]
})

Step 2: Add Blur Event Listener to the Input #

In your template, attach a (blur) event to the email input to trigger the async validation:

<input type="email" formControlName="email" (blur)="validateEmailOnBlur()">

Step 3: Implement the Blur Validation Method #

In your component class, write a method that runs your async validator and updates the FormControl's error state manually:

async validateEmailOnBlur() {
  const emailControl = this.yourFormGroup.get('email'); // Replace with your actual FormGroup reference
  if (!emailControl) return;

  // Run your existing async validator
  const validationError = await this.isEmailPresent(emailControl);

  // Update the control's errors
  if (validationError) {
    // Merge new error with existing sync errors (if any)
    emailControl.setErrors({
      ...emailControl.errors,
      emailPresent: true // Match the error key your async validator uses
    });
  } else {
    // Remove the async error if validation passes
    const currentErrors = { ...emailControl.errors };
    delete currentErrors.emailPresent;
    emailControl.setErrors(Object.keys(currentErrors).length ? currentErrors : null);
  }
}

Why This Works #

• Sync Validators: By not setting updateOn, they use the default 'change' trigger—so they run every time the input's value changes, just like you want.
• Async Validator: We're only executing it when the input loses focus, ensuring it doesn't run on every keystroke (which would be inefficient) and only triggers on blur as requested.

Alternative: Wrapped Async Validator (Caveat) #

You might think of wrapping your async validator to only run when the control is touched, but this would trigger the validator on every value change after the first blur (since touched stays true once set). That's not exactly what you want, so the manual blur trigger is the most reliable approach here.

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