I am currently working on implementing async validation in reactive forms. My goal is to disable the submit button whenever a new input is provided. However, I am facing an issue where if duplicate emails are entered, the form remains valid for a brief period while it checks for availability, allowing the submit button to become clickable.
My objective is to keep the submit button disabled during the email availability check.
validateEmailAvailability(): AsyncValidatorFn {
return (control: AbstractControl): Observable<any> => {
return control.valueChanges.pipe(
debounceTime(500),
distinctUntilChanged(),
take(1),
switchMap(_ => this
.checkEmailExists(control.value)
.pipe(map(isExists => (isExists ? ({ isExists: true}) : null)))
),
)
}
}