set value in mat-autocomplete in angular

Question

I have this mat-autocomplete

<mat-autocomplete #autocopmlete="matAutocomplete">
                                      <mat-option title="{{item.UserName}}" *ngFor="let item of filteredObject" [value]="item"
                         
                                        (onSelectionChange)="selectUser($event,item)">
                                        {{ item.FirstName }} {{item.LastName}} ({{item.UserName}})
                                      </mat-option>
                                    </mat-autocomplete>

i want to set default value in mat-autocomplete using [ngModel]="userselect" but it is showing undefined

autocomplete value is like Amit is the name and its id like 153 is stored as value i'm trying to bind id on page load to show selected name Amit but it's now working

Answer 1

As you didn't post the ts code or even the Angular version, I can't personalize the answer to your case, but I will try to bring some light to your problem.

As you are using an array, you have to use the same value structure as the input return to you you when you recover the value to send it that is the same as your filteredOject content.

Example:

As I said, I can't know how is your project apart of the few html lines that you post it, so I will use a full example for Angular 16 Material instead, but the solution is the same for most of the versions

<mat-form-field>
  <mat-label>User<mat-label>
  <input 
    matInput
    [(ngModel)]="userselect",
    [matAutocomplete]="auto"
   />
   <mat-autocomplete
   autoActiveFirstOption
   #auto="matAutocomplete">
    <mat-option title="{{item.UserName}}" *ngFor="let item of filteredObject | async" [value]="item"
    (onSelectionChange)="selectUser($event,item)">
      {{ item.FirstName }} {{item.LastName}} ({{item.UserName}})
    </mat-option>
   </mat-autocomplete>
 </mat-form-field>

The mat-autocomplet use filteredObject to fill the list (by your html code I asume that it looks like this):

filteredObject = [{FirstName: 'A',LastName: 'B', UserName: 'C'},{..}]

So you have to enter this into the ngModel if you want to change the value manually:

this.userselect = {FirstName: 'C', LastName: 'B', UserName: 'C'}

By other hand, if you are trying to see the content of userSelect, you must put the values that you want to see like this:

<div>
   <b>First Name: </b>{{userSelect.FirstName}}</br>
   <b>Last Name: </b>{{userSelect.LastName}}</br>
   <b>User Name: </b>{{userSelect.UserName}}
</div>

Good luck

For those who need it, is the same solution for a formcontrol form.