Как использовать formControl для двух input

У меня есть два input:

  <label for="location">Location</label>
  <input type="text"
         id="location"
         [formControlName]="location"
         #loc
         [matAutocomplete]="auto">
  <mat-autocomplete  #auto="matAutocomplete">
    <mat-option *ngFor="let flight of filteredLocation | async" [value]="flight.location">
      {{flight?.location}}
    </mat-option>
  </mat-autocomplete>

  <div>

    <label for="direction">Direction</label>
    <input type="text"
           id="direction"
           [formControlName]="direction"
           #dir
           [matAutocomplete]="auto">
    <mat-autocomplete  #auto="matAutocomplete"  >
      <mat-option *ngFor="let f of filteredDirection | async" [value]="f.direction">
        {{f?.direction}}
      </mat-option>
    </mat-autocomplete>

В component:

  public location: FormControl = new FormControl();
  public direction: FormControl = new FormControl();


ngOnInit(): void {
    this.flightService.allFlights().subscribe(res => {this.flights = res;  });
    setInterval(() => {
      this.filteredLocation = this.location.valueChanges.pipe(
        startWith(''),
        map(value => typeof value === 'string' ? value : value.location),
        map(location => location ? this.filterLocation(location) : this.flights.slice())
      );
      this.filteredDirection = this.direction.valueChanges.pipe(
        startWith(''),
        map(v => typeof v === 'string' ? v : v.direction),
        map(direction => direction ? this.filterDirection(direction) : this.flights.slice())
      );
    }, 5000);


  }



 private filterLocation(location: string) {
    const filterValue = this.normilaze(location);
    return this.flights.filter(flight => flight.location.toLowerCase().indexOf(filterValue) === 0);
  }



 private filterDirection(direction: string) {
    const filterValue = this.normilaze(direction);
    return this.flights.filter(d => d.direction.toLowerCase().indexOf(filterValue) === 0 );
  }


private normilaze(location: string): string {
return location.toLowerCase().replace(/\s/g, '');
}

Но работает только для input location, в input direction выводит то что в loction. Как можно сделать что-бы работало для обеих? Должен появляться autocomplete Autocomplete

Но по фильтрации выводятся только данные для location так-как input location идет первым в верстке, и при нажатие на input direction тоже выводятся данные которые должны быть только в input location

Мой результат: Input location

Location

Input direction

Direction

Как видно значения одинаковые


Ответы (0 шт):