Angular form async validator not executed second time

Question

Angular guys,

I need your help with angular forms. I'm using Angular 9 with Angular Material and I have the following issue:

I have a form with 2 fields [name, category] and I'm doing an async custom validation on blur.

This is my template:

<form class="form" autocomplete="off" novalidate [formGroup]="dataForm">
    <mat-form-field class="w-100 mt-4">
        <mat-label>Name</mat-label>
        <input matInput formControlName="name" required trim="blur">
        <mat-error *ngIf="hasError('name', 'exist')">Name already exist</mat-error>
    </mat-form-field>
    <mat-form-field class="w-100 mt-4">
        <mat-label>Category</mat-label>
        <input matInput type="text" placeholder="Choose" formControlName="expenseCategory" [matAutocomplete]="categoryAutoComplete" required trim="blur">
        <mat-autocomplete autoActiveFirstOption #categoryAutoComplete="matAutocomplete" [displayWith]="displayWith">
          <mat-option *ngFor="let item of expenseCategories$ | async; trackBy: identify" [value]="item">
            {{item.name}}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

On the component I have the initialization of the form like this:

private init(){
    this.dataForm = this.formBuilder.group(
      {
        id: new FormControl(this.expenseType.id, []),
        name: new FormControl(
          this.expenseType.name, 
          {
            validators: [ Validators.required, Validators.maxLength(100) ],
            asyncValidators: [ this.validator.nameExist() ],
            updateOn: 'blur'
          }
        ),
        expenseCategory: new FormControl(
          this.expenseType.expenseCategory, 
          {
            validators: [ Validators.required ],
            asyncValidators: [ this.validator.nameExist() ],
            updateOn: 'blur'
          }
        )
      }
    );
  }

And here is my custom async validator (checks if a name of a particular category already exist):

nameExist(): AsyncValidatorFn {
    return (formGroup: FormGroup) => {
      if(!formGroup.parent){
        return of(null);
      }

      const id = formGroup.parent.controls['id'].value;
      const name = formGroup.parent.controls['name'].value;
      const category = formGroup.parent.controls['expenseCategory'].value;

      if(!name || !category){
        return of(null);
      }

      const selectedName: string = name.trim().toLowerCase();
      return this.expenseTypeApi.isNameExist(id, category.id, selectedName).pipe(   
        take(1),
        map( res => { 
          formGroup.parent.controls['name'].setErrors(res.result ? { exist: true } : null);
        })
      );
    };
  }

What I'm trying to achieve here is whenever the user change the name I trigger the async custom validator to check if the name already exist. If yes the validation error will appear. On the first time if the value exist the validation is shown correctly without any problem. After I edit again the field with something that does not exist and the error is gone correctly again. Now if I change it back again to a value that exist the validation error is not shown for some reason that I cannot understand. Does anyone has any idea why this is happening?

Thanks in advance

question from:https://stackoverflow.com/questions/65873625/angular-form-async-validator-not-executed-second-time