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

Question

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

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

演示: 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>