无法在 Angular2 中的一组单选按钮上使用 [formControl]

Question

我在 Angular2 中有一个单选按钮组的列表。我想使用 [formControl] 绑定每组单选按钮的值，但是，单选按钮失去了它们通常的互斥性。

例：

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { ReactiveFormsModule } from '@angular/forms'
import { FormBuilder, FormGroup, FormControl } from '@angular/forms'
@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let formGroup of groups; let i = index">
      <form *ngIf="formGroup" [formGroup]="formGroup">
        <label *ngFor="let mc of codes">
          <input type="radio" [checked]="mc === formGroup.controls.code.value" 
            [formControl]="formGroup.controls.code"> {{mc}}
        </label>
      </form>
    </div>
  `,
})
export class App {
  groups: FormGroup[] = []
  codes: number[] = ['a','b','c']
  constructor(private formBuilder: FormBuilder) {
    for (let i of [0, 1, 2]) {
      this.groups.push(this.formBuilder.group(
        {code: this.codes[i]}  
      ))
    }
  }
}
@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

当我用 [value]="formGroup.controls.code.value" 替换[formControl]="formGroup.controls.code"时，单选按钮按预期工作，但是，当然，我丢失了 formcontrol 的数据绑定。

我对代码(也在 plunkr 中(进行了一些编辑，以明确出了什么问题。

Answer 1

将index替换为 i 。并且您必须为每个输入指定值：

<form *ngIf="formGroup" [formGroup]="formGroup">
  <label *ngFor="let mc of codes">
    <input type="radio" name="code-{{i}}" [value]="mc" 
               [formControl]="formGroup.controls.code"> {{mc}}
  </label> 
  {{ formGroup.value | json }}
</form>

改进的普伦克

也代替

name="code-{{i}}" [formControl]="formGroup.controls.code"

你可以只使用

formControlName="code"

普伦克