Angular2 Material RadioButton 或从布尔值中选择

Question

我有一个包含 3 个布尔值的表单。 我想使用材质选择或材质单选按钮组来强制只有一个布尔值为真。我可以在不使用自定义函数调用、事件或其他技巧的情况下以巧妙的方式做到这一点吗？

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