Async validator and mat-autocomplete not working together

Question

In the validate function I do a request to the api to check if the data validates and that works fine.

But if the value is an object I just return null but that breaks the mat-autocomplete (the panel never closes).

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Optional, EventEmitter, Output, Self } from '@angular/core';
import { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { ErrorStateMatcher } from '@angular/material/core';
import { Observable } from 'rxjs';
import { finalize, map } from 'rxjs/operators';
import { PostalArea } from 'src/app/feature/address/postal-area/portal-area.model';
import { PostalAreaService } from 'src/app/feature/address/postal-area/postal-area.service';

@Component({
  selector: 'postal-code',
  templateUrl: './postal-code.component.html',
  styleUrls: ['./postal-code.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class PostalCodeComponent implements ControlValueAccessor {

  stateMatcher: ErrorStateMatcher = new CtrlErrorStateMatcher();
  postalArea$: Observable<PostalArea[]>;

  @Output() onPostalAreaSelected: EventEmitter<PostalArea> = new EventEmitter();

  constructor(
    private readonly _postalAreaService: PostalAreaService,
    private readonly _changeDetectorRef: ChangeDetectorRef,
    @Optional() @Self() public ngControl: NgControl,
  ) {
    if (this.ngControl != null) {
      // Setting the value accessor directly (instead of using the providers) to avoid running into a circular import.
      this.ngControl.valueAccessor = this;
    }
  }

  ngOnInit() {
    this.ngControl.control.setAsyncValidators(this.validate.bind(this));
    this.ngControl.control.updateValueAndValidity();
  }

  onTouched = (_value?: any) => { };
  onChanged = (_value?: any) => { };

  writeValue(val: string): void {
    this.ngControl.control?.setValue(val);
  }

  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    if (typeof control.value !== 'string') {
      return null;
    }
    this.postalArea$ = this._postalAreaService.getPostalAreas(control.value);

    return this._postalAreaService.getPostalAreas(control.value).pipe(
      map(postalArea => {
        if (postalArea.length === 0) {
          return { invalidPostalCode: true };
        } else {
          return null;
        }
      }),
      finalize(() => {
        this._changeDetectorRef.markForCheck();
      })
    );
  }

  displayFn(postalArea?: PostalArea) {
    return postalArea ? postalArea.zipCode : '';
  }

  onSelectionChanged(event: MatAutocompleteSelectedEvent) {
    this.onPostalAreaSelected.emit(event.option.value);
  }
}

export class CtrlErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: AbstractControl): boolean {
    return !!(control && control.invalid && control.touched);
  }
}

Template:

  <input matInput [errorStateMatcher]="stateMatcher" [formControl]="ngControl?.control"
    [matAutocomplete]="postalCodeAutoComplete" (input)="onChanged($event.target.value)" (blur)="onTouched()"
    name="postal-code" />

  <mat-autocomplete #postalCodeAutoComplete="matAutocomplete" [displayWith]="displayFn.bind(this)"
    (optionSelected)="onSelectionChanged($event)">
    <mat-option *ngFor="let postalArea of (postalArea$ | async)" [value]="postalArea">
      {{ postalArea.zipCode }} {{ postalArea.name }}
    </mat-option>
  </mat-autocomplete>

Answer 1

I did a refactoring in how I thought about this issue.. so here is a solution that works :)

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Optional, Output, Self } from '@angular/core';
import { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { ErrorStateMatcher } from '@angular/material/core';
import { Observable, of } from 'rxjs';
import { debounceTime, distinctUntilChanged, finalize, map, startWith, switchMap } from 'rxjs/operators';
import { PostalArea } from 'src/app/feature/address/postal-area/portal-area.model';
import { PostalAreaService } from 'src/app/feature/address/postal-area/postal-area.service';

@Component({
  selector: 'ssp-postal-code',
  templateUrl: './postal-code.component.html',
  styleUrls: ['./postal-code.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class PostalCodeComponent implements ControlValueAccessor {
  stateMatcher: ErrorStateMatcher = new CtrlErrorStateMatcher();

  postalArea$: Observable<PostalArea[]>;

  @Output() onPostalAreaSelected: EventEmitter<PostalArea> = new EventEmitter();

  constructor(
    private readonly _postalAreaService: PostalAreaService,
    @Optional() @Self() public ngControl: NgControl,
  ) {
    if (this.ngControl != null) {
      // Setting the value accessor directly (instead of using the providers) to avoid running into a circular import.
      this.ngControl.valueAccessor = this;
    }
  }

  ngOnInit() {
    this.ngControl.control.setAsyncValidators(this.validate.bind(this));
    this.ngControl.control.updateValueAndValidity();
    this.postalArea$ = this.ngControl.valueChanges
      .pipe(
        debounceTime(600),
        distinctUntilChanged(),
        switchMap(val => {
          if (!this.ngControl.errors) {
            return this.filter(val || ''); // this.filter(val || '');
          }
        })
      );
  }

  onTouched = (_value?: any) => { };
  onChanged = (_value?: any) => { };

  writeValue(val: string): void {
    this.ngControl.control?.setValue(val);
  }

  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    return this.postalArea$.pipe(
      map(postalArea => {
        if (postalArea.length === 0) {
          this.ngControl.control.setErrors({ invalidPostalCode: true });
        } else {
          return null;
        }
      })
    );
  }

  displayFn(postalArea?: PostalArea) {
    return postalArea ? postalArea.zipCode : '';
  }

  onSelectionChanged(event: MatAutocompleteSelectedEvent) {
    this.onChanged(event.option.value.zipCode);
    this.onPostalAreaSelected.emit(event.option.value);
  }

  filter(val: string): Observable<any[]> {
    return this._postalAreaService.getPostalAreas(val)
      .pipe(
        map(response => response.filter(option => {
          return option;
        }))
      );
  }

}

export class CtrlErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: AbstractControl): boolean {
    return !!(control && control.invalid && control.touched);
  }
}