CODEWITHSUNDEEP
angular
robert
robert

Reputation: 857

AsyncValidator overwrites Validator

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();

Upvotes: 2

Views: 625

Answers (1)

Yan Koshelev
Yan Koshelev

Reputation: 1129

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

Upvotes: 2

Related Questions