I would like to have a default value shown with a mat-select in a stepper from Angular material.
[Edit] you cannot use formControlName with two-way binding. I ended up initializing the value in the component when declaring the form group
<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 File
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['INITIALIZE_VALUE_HERE', Validators.required]
});
actionOnFailure = 'Default Value'
Don't use 2 way binding combined with a form control. Use either Template form with 2 way binding, or the form control with a reactive form.
Remove [(value)]="actionOnFailure"
Then change the formcontrol to have a default value:
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['Default Value', Validators.required]
});