I require assistance. I am attempting to perform a live search using the following code: when text is entered into an input, I want my targetListOptions array, which is used in a select dropdown, to update accordingly. The code runs without errors, but nothing happens when data is inputted. My goal is to search based on the name field retrieved from the backend. I am aiming for a basic input approach without relying on autocomplete. Could you please advise me on how to properly implement this search functionality and identify any mistakes in my code? Thank you sincerely.
HTML
<mat-select formControlName="targetListValue">
<input formControlName="searchTargetInput">
<mat-option *ngFor="let targetItem of targetListOptions" [value]="targetItem.id">
{{ targetItem.name }}
</mat-option>
</mat-select>
Typescript
public form: FormGroup;
public targetListOptions: ITargetData[] = [];
ngOnInit(): void {
this.form = new FormGroup({
templateListValue: new FormControl(null, [Validators.required]),
searchTargetInput: new FormControl('')
})
this.form.controls.searchTargetInput.valueChanges.subscribe(() =>
this.targetListOptions = this.targetListOptions.filter(element => element.name.includes(name)));
}