Question

我试图从连续排列的每个组中获取每个所选单选按钮的值。

<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

JS

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

如何从列表中将每个所选无线电的值输入控制台。

Answer 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>

希望这有帮助

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

1 个答案: