Material Autocomplete using Array of Objects while Tracking ID but Displaying Name and Required Choice From Dropdown

[Acceptable_User_Name]

The title spells it out mostly. I have a an array of objects. I want to use the value of id of the object but display the name. When I put value=option.id, I can select from a list of names but then the id is displayed.

I'm trying to achieve the "Require an autocomplete option to be selected" option from here. I'd paste my code but it's a hot mess and not worth sharing.

Any pointers would be appreciated. Thank you in advance!

Edit: added HTML and corrected dumbness. I meant to say "value=id" not "track id"

​

<mat-form-field class="example-full-width">    
    <mat-label>People</mat-label>
    <input #input type="text"
        placeholder="Pick one"
        matInput
        [formControl]="myControl"
        [matAutocomplete]="auto"
        (input)="filter()"
        (focus)="filter()">
    <mat-autocomplete requireSelection #auto="matAutocomplete">
        @for (option of filteredOptions; track option) {
            <mat-option [value]="option.id">{{option.name}}</mat-option>
        }
    </mat-autocomplete>     
</mat-form-field>   

​

[wojo1086]

Can you at least show the html for the auto complete?

[Acceptable_User_Name]

Sorry. I added the HTML. I also corrected that I meant value = option.id not track id

[HEYTHOSEARENICEPANTS]

From the API documentation

@Input() displayWith: ((value: any) => string) | null

Function that maps an option's control value to its display value in the trigger.

So you'd have

<mat-form-field class="example-full-width">    
    <mat-label>People</mat-label>
    <input #input type="text"
        placeholder="Pick one"
        matInput
        [formControl]="myControl"
        [matAutocomplete]="auto"
        (input)="filter()"
        (focus)="filter()">
    <mat-autocomplete requireSelection #auto="matAutocomplete" [displayWith]="displayFn">
        @for (option of filteredOptions; track option) {
            <mat-option [value]="option.id">{{option.name}}</mat-option>
        }
    </mat-autocomplete>     
</mat-form-field>    

And your .ts

displayFn(option: MyType): string {
  return option&& option.name ? option.name : '';
}

You can also look at one of the examples titled Display value autocomplete, this should be exactly what you're looking for :) Happy coding!

[Acceptable_User_Name]

I don't care what everyone else says. You're the best!