無法在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 {} 

當我更換[formControl]="formGroup.controls.code"與[value]="formGroup.controls.code.value"，則單選按鈕按預期工作，不過呢，當然，我失去了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> 

Modified Plunker

代替

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

您也可以只使用

formControlName="code" 

Plunker