如何以 Angular 反应形式将默认选定值设置为 mat-select？

Question

I'm setting a default value to a drop-down with reactive forms. I did this

HTML

<form [formGroup]="estadosForm" (ngSubmit)="aplicarCambios()">
        <div class="campo campo-x2">
          <mat-form-field>
            <mat-label>Descripcion</mat-label>
            <input matInput formControlName="descripcionForm">
          </mat-form-field>
        </div>
        <div class="campo campo-x2">
          <mat-form-field>
            <mat-label>Clase de estado</mat-label>
            <mat-select formControlName="clasesDeEstadoForm" (selectionChange)="onChangeClaseDeEstado($event.source.value)">
              <mat-option *ngFor="let claseDeEstado of clasesDeEstado" [value]="claseDeEstado">
                {{claseDeEstado.descripcion}}
              </mat-option>
            </mat-select>
          </mat-form-field>
</form>

Typescript

this.f.descripcionForm.setValue(estado.descripcion);
this.f.clasesDeEstadoForm.setValue(estado.idClaseEstado, { onlySelf: true });

This sets the value to the form, but is not shown as the default value en el HTML, I tried placing the [(value)] property in mat-select tag but it didn't work

Answer 1

first change value of mat-option to claseDeEstado's id. for example

<mat-option *ngFor="let claseDeEstado of clasesDeEstado" [value]="claseDeEstado.id">
    {{claseDeEstado.descripcion}}
</mat-option>

then set selected Value's id.

this.f.descripcionForm.setValue(claseDeEstado.id);