单选按钮不能使用 formControl 正确切换

Question

我有一个用 FormBuilder 构建的表单，我在上面定义了两个元素（a 和 b）。

constructor (
  private fb: FormBuilder
) {
  this.form = fb.group({
    a: '',
    b: ''
  });
}

在模板上，我有四个单选按钮，如下所示。

我需要在一列中在它们之间切换，例如在 a1 和 b1（a2 和 b2）之间切换以获得像 a = 1 或 b = 2 这样的值。

但是在输入 [formControl] 时它无法正常工作。

我该如何解决？

<div>
  <input id='a1' type='radio' name='first-column' value='1' [formControl]="form.controls['a']" >
  <label for='a1'>a1</label>

  <input id='a2' type='radio' name='second-column' value='2' [formControl]="form.controls['a']" >
  <label for='a2'>a2</label>
</div>

<div>
  <input id='b1' type='radio' name='first-column' value='1' [formControl]="form.controls['b']">
  <label for='b1'>b1</label>

  <input id='b2' type='radio' name='second-column' value='2' [formControl]="form.controls['b']">
  <label for='b2'>b2</label>
</div>

Plunker Link

Answer 1

为此你必须给它们不同的值和相同的名称（对于 a1 和 a2，b1 和 b2）所以现在你的模板就像

 template: `
    <div>
      <input id='a1' type='radio' name='first-column' value='1' [formControl]="form.controls['a']" >
      <label for='a1'>a1</label>

      <input id='a2' type='radio' name='second-column' value='2' [formControl]="form.controls['a']" >
      <label for='a2'>a2</label>
    </div>

    <div>
      <input id='b2' type='radio' name='first-column' value='3' [formControl]="form.controls['b']">
      <label for='b2'>b1</label>

      <input id='b2' type='radio' name='second-column' value='4' [formControl]="form.controls['b']">
      <label for='b2'>b2</label>
    </div>

`

希望对你有所帮助。

勾选Updated Plank

Answer 2

更新了 Plunker 以检查值

https://plnkr.co/edit/DH3BxanfGTTtaaFnmzFs?p=preview

对模板进行了如下更改 a1

  <input id='a2' type='radio'   name = "b" value='2' [formControl]="form.controls['a']" >
  <label for='a2'>a2</label>
</div>

<div>
  <input id='b1' type='radio'  name = "a" value='3' [formControl]="form.controls['b']" >
  <label for='b2'>b1</label>

  <input id='b2' type='radio'  name = "b" value='4' [formControl]="form.controls['b']" >
  <label for='b2'>b2</label>
</div>
 <button type="submit" [disabled]="form.invalid">Submit</button>

{{form.value|json}}

单选按钮不能使用 formControl 正确切换

Radio buttons don't toggle correctly with a formControl

formbuilder

angular