How to handle multiple radio buttons - Angular

Question

Here I have list of yes or no questions and provide radio buttons for the user to choose the answer for each individually - also providing two buttons for "All Yes" and "All No".

Individually selecting is fine but I don't know how to bind either the "All Yes" or "All No" buttons and collect the values of each question.

<div *ngFor="let question of questionsList; let i=index; ">
  <label>
    {{question.id}} 
    <input type="radio" [name]="i + 1">
    <span>Yes</span>
    <input type="radio" [name]="i + 1">
    <span>No</span><br>
  </label>
</div>

<div style="text-align: center">
  <button type="button">All Yes</button>
  <button type="button">All No</button> 
  <button type="button">Submit</button>
  <button type="button">Clear</button>  
</div>

jitender · Accepted Answer · 2019-09-30 05:02:08Z

6

Set [value] attribute for radio button and than use ngModel for two way binding and add some property like isSelected to your model to set true/false for all something like

<div *ngFor="let question of questionsList; let i=index; ">
    <label>
            {{question.id}} 
        <input type="radio" [value]="true" [(ngModel)]="question.isSelected"  [name]='i+1'>
            <span>Yes</span>
        <input type="radio" [value]="false" [(ngModel)]="question.isSelected"  [name]='i+1' >
            <span>No</span><br>
    </label>
</div>

In your component

selectAll(){
    this.questionsList.forEach(i=>{
      i.isSelected=true;
    })
  }

  unSelectAll(){
    this.questionsList.forEach(i=>{
      i.isSelected=false;
    })
  }

Demo

answered Sep 30, 2019 at 5:02

jitender

10.4k1 gold badge22 silver badges49 bronze badges

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

4 Comments

Jayden Over a year ago

Thanks for your answer..here I don't want to fill any answer initially. but in this case while loading it self it is getting selected right..so how to handle?

jitender Over a year ago

@royal just remove isSelected property from your data array and set type of data array stackblitz.com/edit/angular-iimmgg

Eliseo Over a year ago

@jitender, Shafeeq, NOT use [value] you has already [(ngModel)], simple give value to the variable "question.isSelected"

jitender Over a year ago

@Eliseon did you try if that works I think it doesn't work if we remove [value]

user11208420 · Accepted Answer · 2019-09-30 05:05:53Z

0

First of all change button type to type tag. Then you can assign id and value to the tag.

other solution is you can add change or click events to button and to click methods you can send some values to function in your javascript.

answered Sep 30, 2019 at 5:05

user11208420

Comments

Shafeeq Mohammed · Accepted Answer · 2019-09-30 05:30:17Z

0

its only an example for working with Radio Button

.HTML

<div class="form-check-inline">
    <label class="form-check-label">
    <input type="radio" class="form-check-input"  checked="!checked" name="radio"  [(ngModel)]="radio" [value]="true">active
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" 
                      checked="!checked"name="radio1"  [(ngModel)]="radio1" [value]="true">Deactive
  </label>
</div>
<button (click)="print( radio,radio1)"> shaa</button>

.ts

  radio=false;
radio1=false;
  print(){
  console.log(this.radio,this.radio1)
  this.radio = false;
  this.radio1 = false;
}

Stackbliz example

answered Sep 30, 2019 at 5:30

Shafeeq Mohammed

1,3081 gold badge18 silver badges28 bronze badges

1 Comment

Eliseo Over a year ago

Shafeeq, NOT use checked nor [value] you has already [(ngModel)], simple give value to the variable "radio"

Collectives™ on Stack Overflow

How to handle multiple radio buttons - Angular

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related