AsyncValidator overwrites Validator

user_5657968 0
Viewed 79

Are there any reasons why adding a validator overwrites the existing async validator?

I use Angular 12 and addValidator() on formGroup. The docs say: "without affecting other validators."

As soon as I add the validator, async validator did not fire any more.

public testValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return of({wrongAuthority: 123});
    }
  }

public authorityValidator(control: AbstractControl) {
   return {wrongAuthority: 12333};
}

this.form = this._fb.group({...}, { asyncValidators: this.testValidator()});

this.form.addValidators(this.authorityValidator);
this.form.updateValueAndValidity();
angular
1 Answers

Investigation of Angular code provide some results:

(this as {errors: ValidationErrors | null}).errors = this._runValidator();
(this as {status: FormControlStatus}).status = this._calculateStatus();

 if (this.status === VALID || this.status === PENDING) {
    this._runAsyncValidator(opts.emitEvent);
 }

As you can see sync validator executes first and sets the status of control then if he throws an error async validator is ignored by the value of status. That makes sense.

Github

P.S. executing of validators with console.log

user_137345640
Related