displayWith(obj?: any): string | undefined {
return obj ? obj.name : undefined;
}

This solved my problem. It includes filtering too.

I’ve a problem though, with the given example the Autocomplete is loaded well but is not searchable. To make it searchable I’ve tried using [formControl] on top of existing code as below and the list just doesn’t load at all, what am I missing?

Template:

{{skillItem.name}}

Please enter a value

Please select a valid skill

Component:

this.form = new FormGroup({
skill: new FormControl(”, [Validators.required, this.RequireMatch]),
});

this.filteredSkillData = this.skillMatAutocompleteControl.valueChanges
.pipe(
startWith(null),
map(name => name ? this._filter(name) : this.skillData.slice())
);

private _filter(value: any): Skill[] {
value = (value && typeof value === ‘string’) ? value : value.name;
const filterValue = value.toLowerCase();
return this.skillData.filter(skill => skill.name.toLowerCase().includes(filterValue));
}

Hi, do you see any errors in the console (hit F12 to see)? Also, make sure the control key matches your form control defined in the component.

Hi Ankur, thank you for your comment. What error message are you getting?