angular - 如何在 mat-radio-group Angular react 形式中绑定(bind)默认值

Question

在我的例子中，它需要激活选项 01 作为默认选择。它使用 checked=true 属性，但值不与 formControlName="options"绑定(bind)，它在用户选择任何选项时绑定(bind)。如果没有任何用户选择选项值显示为“空”。

  <div class="row">
      <mat-radio-group formControlName="options">
        <mat-radio-button checked=true  value="1">Option 01</mat-radio-button>
        <mat-radio-button  value="2">Option 02</mat-radio-button>
      </mat-radio-group>
    </div>

请帮我解决这个问题。谢谢。

Answer 1

您想要做的是删除 checked 并将预选值设置为您的 formControl，因此当您构建表单时:

constructor(private fb: FormBuilder) { 
  this.myForm = this.fb.group({
    options: ['1']
  })
}

然后您只需删除 checked 属性:

<mat-radio-group formControlName="options">
  <mat-radio-button value="1">Option 01</mat-radio-button>
  <mat-radio-button  value="2">Option 02</mat-radio-button>
</mat-radio-group>