Angular2材质RadioButton或从布尔值中选择

Question

我有一个包含3个布尔值的表格。 我想使用“材料选择”或“材料”单选按钮组来强制仅将一个布尔值设为true。我可以不使用自定义函数调用，事件或其他技巧而巧妙地做到这一点吗？

bnForm: FormGroup = this.fb.group({
    isContinuous: [true],
    isDiscrete: [false],
    isHybrid: [false]
});

有没有办法做这样的事情（不起作用）？

<form [formGroup]="bnForm">
    <mat-radio-group>
        <mat-radio-button [value]="isContinuous">Continuous</mat-radio-button>
        <mat-radio-button [value]="isDiscrete">Discrete</mat-radio-button>
        <mat-radio-button [value]="isHybrid">Hybrid</mat-radio-button>
    </mat-radio-group>
</form>

Answer 1

在@ConnorsFan的评论之后，如果值是互斥的，则您可能更喜欢这样做-stackblitz

标记

<form [formGroup]="form">
  <mat-radio-group formControlName="type">
    <mat-radio-button value="Continuous">Continuous</mat-radio-button>
    <br><br>
    <mat-radio-button value="Discrete">Discrete</mat-radio-button>
    <br><br>
    <mat-radio-button value="Hybrid">Hybrid</mat-radio-button>
  </mat-radio-group>
</form>

代码

export class RadioOverviewExample {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      type: ['Continuous']
    });

    this.form.valueChanges.subscribe((simpleChanges: SimpleChanges) => {
      console.log(simpleChanges);
    });
  }
}

Answer 2

请参考此示例。

https://material.angular.io/components/radio/examples