Creating a radio group into json object with Angular

Question

I need a dynamic number of radio buttons based on radio name to create an object for example, I'm expecting an output of something like this

Expected Output

[
 {Q1: '1'},
 {Q2: '3'} 
];

I tried by using [(ngModel)]

But, when I click any radio, always the last one gets selected and the value is never assigned to ngModel.

If I remove ngModel, the radios work fine, but, value is not set and only value can be selected at time. What can be done here?

app.component.html

<div *ngFor="let question of questions">
<ul>
    <li>
      <span>{{question.id}}.{{question.name}}</span>
      <div *ngFor="let radio of radioGroup">
         <input id="{{question.radioName}}" 
                class="radio-button" 
                [value]='radio.id' 
                type="radio" 
                name="radio"/>
          <div class="radio-tile">
             <label for="{{question.radioName}}" 
                    class="radio-tile-label">
                      {{radio.name}}
             </label>
           </div>
         </div>
        </li>
      </ul>
   </div>

app.component.ts

export class AppComponent {

 questions;
 radioGroup;

 ngOnInit() {
  this.questions =[
   {
    id: '1', 
    name: 'What is your name?', 
    radioName: 'Q1',
    modelName: 'question1'
  },
  { 
    id: '2', 
    name: 'What is your role in your organization?',  
    radioName: 'Q2',
    modelName: 'question2' 
  }
 ];


 this.radioGroup = [
   {id: '1', name: 'Strongly Disagree'},
   {id: '2', name: 'Disagree'},
   {id: '3', name: 'Neutral'},
   {id: '4', name: 'Agree'},
   {id: '5', name: 'Strongly Agree'},
  ];
 }
}

muradm · Accepted Answer · 2018-10-30 06:46:50Z

1

One way of doing (without minimal changes to your code) is with change event as illustrated below.

Better ways would be to look into Angular reactive forms.

Make note:

in template - (change)="selected(question.radioName, radio.id)"
in code - selected(qName, reqId) { this.answers[qName] = reqId; }

change event will fire on radio changed, where you can update your model via selected method.

Then adding submit and if necessary enabled/disabled check should be straight forward by evaluating answers field.

<div *ngFor="let question of questions">
  <ul>
    <li>
      <span>{{question.id}}.{{question.name}}</span>
      <div *ngFor="let radio of radioGroup">
        <input id="{{question.radioName}}"
               class="radio-button"
               [value]='radio.id'
               type="radio"
               name="radio" (change)="selected(question.radioName, radio.id)"/>
        <div class="radio-tile">
          <label for="{{question.radioName}}"
                 class="radio-tile-label">
            {{radio.name}}
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>
<div>{{ answers | json }}</div>


export class AppComponent implements OnInit {

  questions;
  radioGroup;

  answers = {};

  ngOnInit() {
    this.questions = [
      {
        id: '1',
        name: 'What is your name?',
        radioName: 'Q1',
        modelName: 'question1'
      },
      {
        id: '2',
        name: 'What is your role in your organization?',
        radioName: 'Q2',
        modelName: 'question2'
      }
    ];


    this.radioGroup = [
      {id: '1', name: 'Strongly Disagree'},
      {id: '2', name: 'Disagree'},
      {id: '3', name: 'Neutral'},
      {id: '4', name: 'Agree'},
      {id: '5', name: 'Strongly Agree'},
    ];
  }

  selected(qName, reqId) {
    this.answers[qName] = reqId;
  }
}

answered Oct 30, 2018 at 6:46

muradm

2,07320 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pradeep Over a year ago

I facing trouble with implementing showing the checked radio form the created object. Any idea how to go about it? Example: for the question I selected 2 which is 'Disagree' and for question 2 I choose 4 'agree' and save it. when I come back to same page I'm not able to show the saved values as checked, it shows a fresh form

muradm Over a year ago

@Pradeep, that is because you are storing these values in component. Once component is destroyed, all data on it will be lost. Which is normally caused by navigating away from component. I suggest to read Angular documentation on component life-cycle (see hooks OnInit, OnDestroy). If you want to some how preserve the values, that will depend on your requirements. You are able to implement it from simple solutions like Angular services, up to complex ones like using NgRX, or saving data to backend. All depends.

Pradeep Over a year ago

Sure will go through the documentation. I'm already storing it in the backed can I assign to the [checked]=selected value.

muradm Over a year ago

If you are storing already, then in order to display it, you have to fetch it from backend first, like with HttpClient. And then use data from backend in component.

Pradeep Over a year ago

Yes, I'm retrieving the data from the backend and assigned to the variable called selectedAnswers = { {Q1: "1"}, {Q2: "4"} } <- Like this, now can you tell me how do I set it for [checked]

Collectives™ on Stack Overflow

Creating a radio group into json object with Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related