Angular Material Stepper With Mat-Select implementing default value

Question

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'

MDave · Accepted Answer · 2020-04-18 18:40:31Z

1

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]
});

answered Apr 18, 2020 at 18:40

MDave

1,40515 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christopher You Over a year ago

What if it is dynamic content (like using an ngFor on a form). @MDave

MDave Over a year ago

You can dynamically create a list of form controls with FormArray pretty easily. Here's an example: angular.io/api/forms/FormArrayName#example

Collectives™ on Stack Overflow

Angular Material Stepper With Mat-Select implementing default value

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related