单选按钮：使用 [formControl] 而不是 [formControlName]

Question

假设我在 Angular 组件中有以下表单。 3 个表单控件是单选按钮：

form = new FormGroup({
    formControl: new FormControl(),
    formControl2: new FormControl(),
    formControlName: new FormControl()
});

在模板上创建单选按钮时，我见过的所有示例都使用[formControlName]，如下所示：

<form [formGroup]="form">
    <input
        type="radio"
        id="formControlNameTrue"
        [formControlName]="'formControlName'"
        [value]="true"
    >
    <label for="formControlNameTrue">FCN True</label>
</form>

但是，我想改用[formControl]：

<input
    type="radio"
    id="formControlTrue"
    [formControl]="formControl"
    [value]="true"
>
<label for="formControlTrue">FC True</label>

问题在于，当使用[formControl] 方法使用2 个或更多单选按钮时，模板无法正确显示控件的值。在下面的屏幕截图中，我用鼠标选择了“FC True”，然后选择了“FC2 False”。这两个控件都是使用[formControl] 构建的。结果如下：

有关完整代码，请参阅以下 stackblitz：https://stackblitz.com/edit/angular-3gbgbp。

有没有办法只用[formControl] 创建一个单选按钮？如果不是，这是预期行为还是可能是错误？

Answer 1

不需要使用属性绑定试试下面的代码。

 form: FormGroup = new FormGroup({
    formControl: new FormControl(),
    formControl2: new FormControl(),
    formControlName: new FormControl()
  });

  get formControl() {
    return this.form.get("formControl");
  }

  get formControl2() {
    return this.form.get("formControl2");
  }

  get formControlName2() {
    return this.form.get("formControlName");
  }

  constructor() {
    this.form.valueChanges.subscribe(changes => {
      console.log(changes);
    });
  }

HTML

<form [formGroup]="form">
    <div>
        <input
      type="radio"
      id="formControlTrue"
      formControlName="formControl"
      [value]="true"
    >
        <label for="formControlTrue">FC True</label>
        <input
      type="radio"
      id="formControlFalse"
      formControlName="formControl"
      [value]="false"
    >
        <label for="formControlFalse">FC False</label>
    </div>
    <div>
        <input
      type="radio"
      id="formControl2True"
      formControlName="formControl2"
      [value]="true"
    >
        <label for="formControl2True">FC2 True</label>
        <input
      type="radio"
      id="formControl2False"
      formControlName="formControl2"
      [value]="false"
    >
        <label for="formControl2False">FC2 False</label>
    </div>
    <input
    type="radio"
    id="formControlNameTrue"
    formControlName="formControlName"
    [value]="true"
  >
    <label for="formControlNameTrue">FCN True</label>
    <input
    type="radio"
    id="formControlNameFalse"
    formControlName="formControlName"
    [value]="false"
  >
    <label for="formControlNameFalse">FCN False</label>
</form>