Obtain the selected value from a nested radio button group in Angular 2

Question

Obtain the selected value from a nested radio button group in Angular 2

I am attempting to retrieve the value of each selected radio button from every group that follows in a row.

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

Example

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

Question 2
A.Dog
B.Eagle
C.Donkey

JS

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

How can I fetch the values of all selected radio buttons from the list and display them in the console?

javascript angular typescript ionic-framework

Answer 1

Answer №1

If you need to pass form-controls from a parent component to a child component, take a look at this helpful blog post:

However, if you're dealing with a situation where there are no nested children components, refer to the code snippet below:

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

Make sure to inject the form builder in your constructor like so:

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

Given that there are no child components, I have revised the form structure accordingly:

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

I hope this explanation and code snippet prove useful to you.

Answer 2

If you need to pass form-controls from a parent component to a child component, take a look at this helpful blog post:

However, if you're dealing with a situation where there are no nested children components, refer to the code snippet below:

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

Make sure to inject the form builder in your constructor like so:

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

Given that there are no child components, I have revised the form structure accordingly:

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

I hope this explanation and code snippet prove useful to you.

Obtain the selected value from a nested radio button group in Angular 2

Answer №1

Similar questions

Ways to utilize the <p> tag within the res.write() function

Solving CORS policy errors in Dot Net Core Web API using Javascript

A component designed to capture and respond to events triggered by its child elements

Issues have arisen due to server calls being affected by AngularJS routing

Utilizing a segment of one interface within another interface is the most effective method

Delivering an Angular2 application from a base URL using Express

What is the process for adding a highlighted area beneath a curve on a high chart?

How can an array object be reconstructed by iterating through MongoDB documents in JavaScript?

Exploring the StackNavigationProps and Screen properties in react-navigation v5 for Typescript

Tips for optimizing scrolling of a specific element with a letter parameter

Implementing the Upload Feature using AngularJS

Angular 6: A guide to dynamically highlighting navbar elements based on scroll position

Configuring ESLint and Babel

Update the line material in three.js dynamically during runtime

Hiding content in HTML with the Display:none property

Successfully running npm update on a Mac seemed to have updated the package, however, the

Saving the authenticated user's information from Firebase (including first name, last name, gender, and more) directly to our database

Is it possible to extract information from a form's POST request without relying on the traditional "action" attribute within form elements?

Using jQuery ajax links may either be effective or ineffective, depending on the scenario. At times

Angular is incorrectly updating all fields at once instead of updating only the intended one field