获取angular2中嵌套单选按钮组的值答案

【问题标题】：Get the value of nested radio button group in angular2获取angular2中嵌套单选按钮组的值
【发布时间】：2017-10-29 23:08:02
【问题描述】：

我正在尝试从连续的每个组中获取每个选定单选按钮的值。

<button ion-button (click)="sample()">Test</button>
    <ion-list *ngFor="let item of test; let i = index">
        <ion-item text-wrap  padding no-lines>
          <h2>{{i + 1}}. {{item.Ask}}</h2>
        </ion-item>
        <form [formGroup]="regis_form">
            <ion-list radio-group formControlName="uanswer"  [(ngModel)]="test['uanswer'+i]">
        <ion-item >
            <ion-label>A. {{item.Alt_Ans_1}}</ion-label>
            <ion-radio value="A" name="uanswer"></ion-radio>
          </ion-item>

          <ion-label>B. {{item.Alt_Ans_2}}</ion-label>
            <ion-radio value="B" name="uanswer"></ion-radio>
          </ion-item>

           <ion-label>C. {{item.Alt_Ans_1}}</ion-label>
            <ion-radio value="C" name="uanswer"></ion-radio>
          </ion-item>


          </form>

        </ion-list>

例子

1.Question 1
A. Ant
B. Bat
C. Cat

Question 2
A.Dog
B.Eagle
C.Donkey

sample(){
  console.log(this.uanswer)
}

如何从列表中获取每个选定收音机的值到控制台。

【问题讨论】：

标签： javascript angular typescript ionic-framework

【解决方案1】：

对于将表单控件从父级传递给子级 - 然后看看这个博客，这可能会对你有所帮助 - http://brophy.org/post/nested-reactive-forms-in-angular2/

如果您没有嵌套子项，请参阅以下答案。

//import necessary modules
import {FormArray,FormBuilder,FormControl} from '@angular/forms'

在你的构造函数中注入表单生成器

...
regis_form:any;
test:Array<any>;
constructor(private _fb:FormBuilder){}

//then initialize the form builder
ngOnInit(){
    this.regis_form = this._fb.group({
        radioGroup:this._fb.array([
          //assuming this.test has already been initialized
          this.addRadioGroup(this.test);
      ])
    });
}

//add your group 
addRadioGroup(test){
    let radioGroupControl = <FormArray>this.regis_form.controls.radioGroup;
    for(let i=0;i<test.length;i++){
        radioGroupControl.push(this.radioAnswerForm(test[i]));
    }
}

//initialize each value 
radioAnswerForm(valueFromArray){
    return this._fb.group({
        uanswer:[valueFromArray],
        ask:[valueFromArray.Ask],
        alt_ans_1:[valueFromArray.Alt_Ans_1],
        alt_ans_2:[valueFromArray.Alt_Ans_2],
       alt_ans_3:[valueFromArray.Alt_Ans_3],
   });
}

sample(){
    // now iterate through form control to get the value 
}

考虑到没有子组件，我已经更改了表单

<button ion-button (click)="sample()">Test</button>
<form [formGroup]="regis_form">
    <div formArrayName = "radioGroup">
        <div *ngFor="let radio of regis_form.controls.radioGroup.controls; 
        let i = index">
        <div text-wrap  padding no-lines>
          <h2>{{i + 1}}. radio.get('ask').value</h2>
        </div>


        <div>
            <label>A. {{radio.get('alt_ans_1').value}}</label>
            <input type="radio"  [value]="regis_form.controls.radioGroup.controls[i].controls.alt_ans_1">
        </div>

        <div>
            <label>B. {{radio.get('alt_ans_2').value}}</label>
            <input type="radio"  [value]="regis_form.controls.radioGroup.controls[i].controls.alt_ans_2">
        </div>

        <div>
            <label>C. {{radio.get('alt_ans_1').value}}</label>
            <input type="radio"  [value]="regis_form.controls.radioGroup.controls[i].controls.alt_ans_3">
        </div>
     </div>
    </div>
</form>

希望对你有帮助

【讨论】：