Question

我在Angular2中有一组radiobuttons。我想使用[formControl]绑定每组radiobutton的值，但是，radiobuttons失去了它们通常的互斥性。

示例：

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"时，radiobuttons按预期工作，但当然，我失去了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

无法在Angular2中的一组radiobuttons上使用[formControl]

1 个答案: