HTML:
<form [formGroup]="basicForm">
<section>
<mat-form-field>
<mat-label>Select Country*</mat-label>
<input matInput type="text" maxlength="20" formControlName="country [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="countryDisplayWith">
<mat-option *ngFor="let country of filteredCountryAutoCompleteOptions | async [value]="country">
{{country}}</mat-option>
</mat-autocomplete>
</mat-form-field>
</section>
</form>
/////////////////////////////////////////////////
TS:
filteredCountry: string[] = ['abc', 'def', 'ghi'];
this.basicForm = new FormGroup({
country: new FormControl({ value: '' }, Validators.required) });
filteredCountryAutoCompleteOptions: Observable<string[]> | undefined;
countryDynamicFilter() {
this.filteredCountryAutoCompleteOptions = this.basicForm.controls.country.valueChanges.pipe(
startWith(''),
map((value) => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.filteredCountry.filter(
(option) =>
option.toLowerCase().includes(filterValue)
);
}
countryDisplayWith(op: any) {
return op ? op: '';
}
I am experiencing an issue where I see [Object Object] initially in the Input Box as a value, although the autocomplete functionality works correctly.
I suspect that this problem is related to the [displayWith] attribute. Any assistance in resolving this would be greatly appreciated.