2017-10-29 19 views
0

次の行に続く各グループから選択した各ラジオボタンの値を取得しようとしています。angular2のネストされたラジオボタングループの値を取得します

<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) 
} 

。これはあなたを助けるかもしれないが、このブログを見て、その後チャイルド親からフォームのコントロールを渡すため

答えて

0

からhttp://brophy.org/post/nested-reactive-forms-in-angular2/

あなたがネストされた子供を持っていない場合は、以下の回答を参照してください。私は

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

ホープこれは

を助け子コンポーネントが存在しないことを考慮すると、フォームを変更した

... 
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 
} 

コンストラクタ注入フォームビルダーで

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

関連する問題