CODEWITHSUNDEEP
angular-material
Fanto
Fanto

Reputation: 367

Change mat-select default value

I can't change the default value or my mat-select item even if i set value property in the proper way.

ngOnInit() {
this.vehicles$ = this.vehicleService.getVehicles();
if (this.fuelId > 0) {
  this.editClicked();
  this.fuelService.getFuel(this.fuelId).subscribe(data => (
      ......
      this.vehicleList.patchValue(data.vehicle),
      console.log(this.vehicleList.value),
      ......
    ));
}

This is the log output:

fuel-add-edit.component.ts:55 {id: 20, plate: "random1", fuels: Array(0), journeys: Array(0), maintenances: Array(0)}

and this is my mat-select

<mat-form-field class="float-left w-75">
  <mat-label>Scegli Automezzo</mat-label>
  <mat-select [formControl]="vehicleList" [errorStateMatcher]="matcher">
    <mat-option *ngFor="let vehicle of vehicles$ | async" [value]="vehicle">
      {{ vehicle.plate }}
    </mat-option>
  </mat-select>
</mat-form-field>

I would like to have the proper vehicle already selected when editing an item instead of "Scegli automezzo"

Upvotes: 0

Views: 261

Answers (1)

randombits.dev
randombits.dev

Reputation: 1366

You must pass in a [compareWith] function if the value is an object. See the answer in Angular Material Select - Default Value - Reactive Forms for a full explanation of the problem.

Upvotes: 0

Related Questions