Question

在我的情况下，它需要激活选项01作为默认选择。它使用checked = true属性，但是value不与formControlName =＆＃34; options＆＃34;绑定，当用户选择任何选项时它是绑定。如果没有任何用户选择选项值显示为＆＃34; null＆＃34;。

  <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>

DEMO： https://plnkr.co/edit/8QiJmwPd0p5ywpvpTnCx?p=preview

Answer 2

备用方式：

 this.optionFormGroup = new FormGroup({
  options: new FormControl('1'); // the value type (string) should match
 })

-

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

如何在mat-radio-group角度反应形式中绑定默认值

2 个答案: