Как использовать 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
Но по фильтрации выводятся только данные для location так-как input location идет первым в верстке, и при нажатие на input direction тоже выводятся данные которые должны быть только в input location
Мой результат: Input location
Input direction
Как видно значения одинаковые

