Невозможно очистить выбранную опцию mat-autocomplete при удалении введенного текста

Question

У меня есть два mat-autocomplete, когда я выбираю вариант из первого, второй загружается в зависимости от этого первого варианта mat-autocomplete. После того, как я выберу вариант из второго коврика-автозаполнения, если я просто очищу первый коврик, просто удалив текст, (optionSelected) не будет продолжен и, следовательно, не очистит параметры второго коврика. Я борюсь с тем, как создать событие для очистки второй опции автозаполнения мата, когда пользователь вручную (текст) удаляет вариант с первого мата.

HTML

<mat-form-field class="form-element">
  <input type="text" matInput placeholder="Locación" formControlName="locacion" [matAutocomplete]="locacion">
  <mat-error *ngIf="!formGroup.controls['locacion'].valid">
    {{ titleAlert }}
  </mat-error>
  <mat-autocomplete autoActiveFirstOption #locacion="matAutocomplete" [displayWith]="displayLocacion" (optionSelected)="cargarRutas()">
    <mat-option *ngFor="let locacion of locaciones | async" [value]="locacion">
      {{locacion.nombre}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
<mat-form-field class="form-element">
  <input type="text" matInput placeholder="Ruta" formControlName="ruta" [matAutocomplete]="ruta">
  <mat-error *ngIf="!formGroup.controls['ruta'].valid">
    {{ titleAlert }}
  </mat-error>
  <mat-autocomplete autoActiveFirstOption #ruta="matAutocomplete" [displayWith]="displayRuta">
    <mat-option *ngFor="let ruta of rutas | async" [value]="ruta">
      {{ruta.nombre}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

TS

  async cargarRutas() {
    if (this.formGroup.controls['locacion'].valid) {
      this.cargaRutas = await this.rutaService.getRutasLocacion(this.formGroup.get('locacion').value.id)
    }
  }

Answer 1

Вы можете использовать valueChanges, генерируемый при изменении значения FormControl на

this.subscription = this.formGroup.get('locacion').valueChanges.subscribe(value => { 
  if (!!value.id) {
     this.cargaRutas = await this.rutaService.getRutasLocacion(value.id)
  } else {
     this.cargaRutas = [];
  }
});

В условии if вы даже можете поместить typeof value === 'object'; Не забывайте, что вам нужно отказаться от подписки на все наблюдаемые объекты, которые не завершаются сами собой. Так что реализуйте интерфейс OnDestroy и

ngOnDestroy(): void {
   this.subscription.unsubscribe();
}