在angular2中使用單選按鈕控制陣列

你好，我有一個由控制組組成的控制數組，並在模板中循環控制數組來創建單選按鈕。我能夠選擇所有的單選按鈕，儘管它們屬於不同的控制組，並且對它們有不同的名稱......我在這裏做了一個plunker演示http://plnkr.co/edit/jTMZUCj5JVFazlZo7e4W?p=preview（該演示是在beta 9中進行的）...當我刪除[ngFormControl]它完美的工作... 有人可以請告訴我正確的方式來實現嗎？在angular2中使用單選按鈕控制陣列

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>

在這方面，我都會循環模板... 有人可以告訴我在哪裏，我做錯了什麼？

來源

2016-07-26 abhilash reddy

是否需要是舊形式模塊或者說是新形式模塊罰款以及？ –

新窗體模塊對我來說是好的... –

@GunterZochbauer上述要求是否正常工作，如果我使用新窗體（RC-4）實現它們？ –

更新

不適用於最終角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 example

來源

2016-07-26 13:15:28

謝謝@GunterZochbauer ...這個完美的作品 –

綁定在哪裏？添加單選按鈕一直有效。使用索引（i）作爲單選按鈕屬性的「名稱」，以及根據現有數據設置性別的位置有點奇怪？你將它設置爲一個完全無效的值，並強制用戶點擊一個'' –

@ RickO'Shea自從寫了這個答案之後，引入了一個新的表單模塊。之前沒有支持單選按鈕。我很久沒有使用單選按鈕，並且不知道如何使用它們。應該有幾個其他答案可以證明它。 –

在angular2中使用單選按鈕控制陣列

回答

相關問題