使用 Mat-Select 实现默认值的 Angular Material Stepper

Question

我希望在 Angular 材料的步进器中使用 mat-select 显示默认值。

[编辑] 您不能将 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

不要将 2 路绑定与表单控件结合使用。使用带有 2 路绑定的模板表单，或带有反应式表单的表单控件。

删除[(value)]="actionOnFailure"

然后将表单控件更改为具有默认值：

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