单选按钮不能使用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}}