单选按钮：使用 [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>

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

请查看以下 Stackblitz 获取完整代码：https://stackblitz.com/edit/angular-3gbgbp。 是否有一种只使用 [formControl] 创建单选按钮的方式？如果没有，这是预期行为还是可能是一个错误？

- David Silva

---

[formControl]="form.get('formControl')"，但是移除[value]，value是formControl的值。 - Eliseo

选择该单选按钮时，需要使用[value]来指定FormControl将具有的值。 - David Silva

对不起，你是正确的 - 我把复选框和单选按钮搞混了，真是抱歉。 - Eliseo

你弄清楚发生了什么事情了吗？ - Chocho

@Chocho 很抱歉，我还没有找到解决方法。我简要地查看了 Angular 的代码，但没有找到任何有用的信息。RadioControlValueAccessor 有一个 "input[type=radio][formControl]" 选择器，所以它似乎应该可以工作，但实际上并不行。 - David Silva

未来的开发者可以参考以下链接：https://github.com/angular/angular/issues/13243 - Chocho

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>

- Kshitij

---

这正是我试图避免的，正如我在最后一个问题中所说的。 - David Silva

为什么你想要避免使用 formControlName，而是使用 [formControl] 呢？ - Kshitij