如何以 mat-radio-group 角度反应形式绑定默认值答案

【问题标题】：How to bind default value in mat-radio-group angular reactive forms如何以 mat-radio-group 角度反应形式绑定默认值
【发布时间】：2017-10-16 08:48:39
【问题描述】：

在我的情况下，它需要激活选项 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>

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

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：

遗憾的是，在 radio-group 上设置值 0 会使所有单选按钮都未选中。即使是我的一个单选按钮的值也是 0。所以我必须从枚举索引值更改为枚举字符串值以使其正常工作。我想将每个值增加 +1 也可以。
我希望默认选中单选按钮。为此，我使用了 checked=true 但它不起作用。你能帮帮我吗？
@AnilKumar 仅使用“已检查”，这将起作用。示例 '选项 1'
带有选中属性的伟大捕获。

【解决方案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 时，您需要某种方式来定义 FormGroup。通常我看到人们在材料中使用mat-form-field 这样做。这不适用于mat-radio-group。但是，此解决方案有效。就我而言，我使用 <ng-container [formGroup]="parentForm"> 而不是 div。

【解决方案3】：

这将默认从单选按钮选项中选择“是”选项。

  <form [formGroup]="optionsFormGroup">
        <mat-grid-list cols="1" rowHeight="75px">
          <mat-grid-tile>
            <label>Option</label>
            <mat-radio-group formControlName="statusOptions" class="m-l-5">
              <mat-radio-button class="m-r-5" value="yes">Yes</mat-radio-button>
              <mat-radio-button class="m-r-5" value="no">No</mat-radio-button>
            </mat-radio-group>
            <mat-icon class="info-icon">help_outline
            </mat-icon>
          </mat-grid-tile>
        </mat-grid-list>
    </form>

initFormControls() {
    this.optionsFormGroup = this.formBuilder.group({
      statusOptions: ['yes'],
    });
  }

【讨论】：

【解决方案4】：

这看起来像其他答案，但使用布尔值

form: FormGroup = this.formBuilder.group({
  enable: ['']
});

ngOnInit(): void {
  this.form.get('enable').setValue(false);
}

模板

<mat-radio-group aria-label="Select an option" formControlName="enable">
   <mat-radio-button [value]="true" color="primary">Enable</mat-radio-button>
   <mat-radio-button [value]="false" color="primary" class="radio">Disable</mat-radio-button>
</mat-radio-group>

【讨论】：