Angular Материал Stepper с Mat-Select, реализующим значение по умолчанию

Question

Хотелось бы, чтобы значение по умолчанию отображалось с помощью mat mat select в степпере из Angular материала.

[Edit] вы не можете использовать formControlName с двусторонней привязкой. Я закончил инициализацию значения в компоненте при объявлении группы форм

<mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper">
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <mat-form-field>
        <mat-select [(value)]="actionOnFailure" formControlName="firstCtrl">
           <mat-option value="CONTINUE">CONTINUE</mat-option>
              <mat-option value="TERMINATE_ON_ANY">TERMINATE_ON_ANY</mat-option>
        </mat-select>
      </mat-form-field>
    </form> 
  </mat-step>
</mat-horizontal-stepper>

Файл TS

this.firstFormGroup = this._formBuilder.group({
  firstCtrl: ['INITIALIZE_VALUE_HERE', Validators.required]
});
actionOnFailure = 'Default Value'

Answer 1

Не используйте двухстороннее связывание в сочетании с контролем формы. Используйте либо шаблон формы с двухсторонним связыванием, либо элемент управления формы с реактивной формой.

Remove [(value)]="actionOnFailure"

Затем измените formcontrol на значение по умолчанию:

this.firstFormGroup = this._formBuilder.group({
    firstCtrl: ['Default Value', Validators.required]
});