在Angular2控制数组中使用单选按钮

Question

你好，我有一个控件数组，由控件组成。在模板中循环这个控件数组以创建单选按钮。尽管它们属于不同的控件组并具有不同的名称，但我仍然能够选择所有的单选按钮...我在这里制作了一个plunker演示http://plnkr.co/edit/jTMZUCj5JVFazlZo7e4W?p=preview （plunker演示是beta 9版本）...当我移除[ngFormControl]时，它可以完美地工作... 请问有人能告诉我正确的实现方法吗？

  ArrayData=['abhi','rahul'];

ArrayControl=new ControlArray([]);

constructor(fb: FormBuilder) {  

this.ArrayControl=new ControlArray([]);

for(var i=0;i<this.ArrayData.length;i++){
  let myForm = fb.group({
  'Male':  ['', Validators.required]  ,
  'Female':  ['', Validators.required]
}); 

  this.ArrayControl.push(myForm);
}

}

这里是我创建控制数组的方式……

        <div *ngFor="#control of ArrayControl.controls;#i=index">
      <input type="radio" name="{{i}}" value="male" [ngFormControl]="control.controls['Male']"> Male<br>
      <input type="radio" name="{{i}}" value="female" [ngFormControl]="control.controls['Female']"> Female<br>
      <hr>
    </div>

我正在循环模板，但是是否有人可以告诉我哪里出了问题？

- abhilash reddy

---

需要使用旧的表单模块还是新的表单模块也可以？ - Günter Zöchbauer

新的表单模块对我来说很好... - abhilash reddy

@GunterZochbauer 如果我使用新表单(RC-4)来实现上述需求，是否可以正常工作？ - abhilash reddy

Answer 1

更新

对于最终版的Angular 2不适用。

原文

这可能是你正在寻找的：

@Component({
  selector: 'my-app',
  directives: [REACTIVE_FORM_DIRECTIVES],    
  template: `
<div class="ui raised segment"> 
  <h3>Select Gender</h3>
  <form [formGroup]="form">
    <div formArrayName="arr">
      <div *ngFor="let item of arrayData; let i=index">
        <div>{{item}}</div>
        <input type="radio" [formControlName]="i" value="male"> Male<br>
        <input type="radio" [formControlName]="i" value="female"> Female<br>
        <hr>
      </div>
    </div>
  </form>
  <div>data: {{form.value | json}}</div>
</div>  

  `
})
export class AppComponent { 
  arrayData=['abhi','rahul'];

  //gender = new FormControl('', [Validators.required]);
  arr = new FormArray([]);

  constructor() {  
    this.form=new FormGroup({ 'arr': this.arr });
    console.log(this.form);
    for(var i=0; i < this.arrayData.length; i++){
      this.arr.push(new FormControl('', [Validators.required]));
    } 
  }
}

Plunker示例

- Günter Zöchbauer

---

绑定在哪里？添加单选按钮一直都有效。使用索引（i）作为单选按钮属性的“名称”有点奇怪，而且基于现有数据设置性别应该放在哪里？您将其设置为完全无效的值，并强制用户单击某些内容。 - Rick O'Shea

@RickO'Shea 自从写下这个答案以来，已经引入了一个新的表单模块。在那之前，单选按钮的支持并不好。我很久没有使用单选按钮了，也不知道如何使用它们。应该有其他几个答案可以演示它。 - Günter Zöchbauer