Я использую компонент автозаполнения из Angular Материал, который работает, за исключением фильтра поиска (который по умолчанию используется в примере), который не будет искать на основе моего ввода, только отображая все элементы, когда я начинаю печатать.
HTML:
<form (ngSubmit)="submit()" [formGroup]="pacientForm">
<label class="example-radio-group">Disease</label>
<input type="text"
matInput
[(ngModel)]="pacient.disease"
formControlName="disease"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredDiseaseOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
TS:
pacientForm: FormGroup = new PacientCreateFormBuilder().build();
pacient: Pacient;
diseaseOptions: string[] = ['first', 'second', 'third'];
filteredDiseaseOptions: Observable<string[]>;
ngOnInit(): void {
this.filteredDiseaseOptions = this.pacientForm.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.diseaseOptions.filter(option => option.toLowerCase().includes(filterValue));
}
FormGroup:
export class PacientCreateFormBuilder {
public build(): FormGroup {
return new FormGroup({
disease: new FormControl('', []),
});
}
}