How can we reset a radio button after some other radio buttons in the same group have been selected

Question

I have a list of values that are to be displayed as Radio buttons. Each radio button has a value with certain count that will be decreased if the radio button is selected. If radioButton1 is selected then the count becomes 1, if some other radio button say radioButton2 in this list is selected then the count of the radioButton1 is restored to its original value and the count for the radionButton2 is decreased by one. I have been trying to find a solution to this but haven't been able to. Any help will be greatly appreciated thanks!

app.component.ts

this.itemList = [

{ name: 'item1', count: 1},
{ name: 'item2', count: 2},
{ name: 'item3', count: 3},
{ name: 'item4', count: 2},
{ name: 'item5', count: 1},
]

onRadioSelect(userSelect){

this.itemList.forEach((selected,index)=>{
        if(selected.name === userSelect.value){
          
            selected.count -= 1;
      
            if(selected.count === 0){
              this.countZeroDisable= index;
            }
}

app.component.html

<div *ngFor="let items of itemList; let idx = index" [ngClass]="{'disable': idx===countZeroDisable}">
          <input type="radio" name="List1" [value]="items.name" [disabled]="idx===countZeroDisable" (change)= onRadioSelect(List1) #List1>
             {{items.name}}({{items.count}})
          </div>

So in short, which ever option is selected then the count for that object should be reduced by 1 and the rest should be restored? — Nicholas K, Jan 03 '21 at 13:32
Also, the code you shared doesn't even compile. Please share a minimal, verifiable example. — Nicholas K, Jan 03 '21 at 13:39
I have made a few corrections in my code , sorry about that. https://plnkr.co/edit/zCNfHAqjocjLmwUg?open=lib%2Fapp.ts&deferRun=1&preview — Learner.123, Jan 03 '21 at 15:39

score 1 · Accepted Answer · answered Jan 04 '21 at 07:20

Make the following change:

.ts

  onRadioSelect(userSelect) {
    this.itemList.forEach(e => {
      if (e['selected']) {
        e.count = e.count + 1;
        e['selected'] = false;
      }
      if (e.name === userSelect.value) {
        e.count -= 1;
        e['selected'] = true;
      }
    })
  }

.html

<div *ngFor="let items of itemList">
    <input type="radio" name="List1" [value]="items.name" [disabled]="items.count === 0"
        (change)=onRadioSelect(List1) #List1>
    {{items.name}}({{items.count}})
</div>

To simplify things, a new field called selected is added to determine which is the index currently selected. If the index was previously selected then the count is reset else the count is incremented.

score 0 · Answer 2 · edited Jan 03 '21 at 16:20

0

In app.component.html

Change the method

onRadioSelect(List1)

to

onRadioSelect(items)

So you can take the selected item form onRadioSelect.

edited Jan 03 '21 at 16:20

fuggerjaki61

822
1
11
24

answered Jan 03 '21 at 13:30

v.jagadeesh

1

score 0 · Answer 3 · answered Jan 03 '21 at 15:04

0

you can use FormControl and angular handle this for you try to use ReactiveFormModule and other parts of form in angular. it's easy to use and very helpful.

answered Jan 03 '21 at 15:04

Reza Rezazadeh

36
2

How can we reset a radio button after some other radio buttons in the same group have been selected

3 Answers3