Angular:how to implement custom radio button dynamically in angular

Question

I designed custom radio button, this is working proper in static but when i make dynamic, that time it act like checkbox.

<div *ngFor="let currentwork of currentworks">
    <label class="customcheck">{{currentwork}}
        <input type="radio" name="{{currentwork}}">
        <span class="checkmark"></span>
    </label>&nbsp;
</div>

If I put name={{currentwork}}, it will act like checkbox. I want radio button with one selection. I don't know why it's coming like this, please help me.

Radio buttons need to have the same name attribute in order to work all like one object. Maybe you wanted to set the value — Christian Vincenzo Traina
– Christian Vincenzo Traina, Commented Jan 8, 2019 at 11:10
@Cristian Traìna i tried with value also it's not working.. can you please tell briefly.. — indu ECE
– indu ECE, Commented Jan 8, 2019 at 11:13

zmag · Accepted Answer · 2019-01-08 11:21:53Z

2

Names of radio buttons must be the same.

This may works:

<div *ngFor="let currentwork of currentworks">
  <label class="customcheck">{{currentwork}}
    <input type="radio" name="currentworks" [value]="currentwork">
    <span class="checkmark"></span>
  </label>&nbsp;
</div>

edited Jan 8, 2019 at 11:21

answered Jan 8, 2019 at 11:16

zmag

8,27112 gold badges39 silver badges47 bronze badges

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

5 Comments

Christian Vincenzo Traina Over a year ago

Don't forget the value

indu ECE Over a year ago

@Cristian Traìna value means?? sry, i can't get it.

Christian Vincenzo Traina Over a year ago

The value is what's passed on submit, it needs to be different for any input radio

zmag Over a year ago

@CristianTraìna Thanks for your advice :) I edited my post

indu ECE Over a year ago

@CristianTraìna thank you, i have one doubt if i use formControlName , i get error like name and formcontrol must be match. Is any possible implementing of radio button without name property?

Igor · Accepted Answer · 2019-01-08 11:17:37Z

2

You need to set the value, not the name, for each option. The name should be the same for each option. You can also use the binding bracket notation [value] over value="{{}}.

<div *ngFor="let currentwork of currentworks">
  <label class="customcheck">{{currentwork}}
    <input name="myRadioButton" type="radio" [value]="currentwork">
    <span class="checkmark"></span>
  </label>&nbsp;
</div>

Stackblitz

answered Jan 8, 2019 at 11:17

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Comments

Raj · Accepted Answer · 2019-01-08 11:21:42Z

1

With reactive form approach, you can use like -

<div *ngFor="let currentwork of currentworks">
  <label class="customcheck">
     <input type="radio" [value]="currentwork.id" 
       formControlName="radiobuttoncontrolname">
     <span class="checkmark"></span>
     <span class="customcheck">{{currentwork.Name}}</span>
  </label>
</div>

I am assuming that you are having your currentWorks as -

currentWorks = [
 { id: 'something', Name: 'something' },
 { id: 'something2', Name: 'something2' }
];

answered Jan 8, 2019 at 11:21

Raj

3821 gold badge3 silver badges19 bronze badges

Comments

Giacomo Rocco · Accepted Answer · 2019-01-08 13:12:24Z

1

For radio buttons to work you need to give the same name and for each option give a value.

A working example should be:

<div *ngFor="let currentwork of currentworks">
    <label class="customcheck">{{currentwork}}
    <input type="radio" name="options" value="{{currentwork}}">
    <span class="checkmark"></span>
    </label>&nbsp;
</div>

As you can see I give a name (options) that is the same for all input values, and then using currentwork as value.

Here a working example (check app.ts)

Edit: you can even generate multiple radio selection. But you should share an example of your dynamic data.

http://next.plnkr.co/edit/zuhY7kgzPj6141oY?preview

edited Jan 8, 2019 at 13:12

answered Jan 8, 2019 at 11:23

Giacomo Rocco

336 bronze badges

2 Comments

indu ECE Over a year ago

i have dynamic data, if i add that radio button field array, that time i can't give same name for each options , In that case what i do ? please help me. I am struggling in that case also..

Giacomo Rocco Over a year ago

@induECE You should share a full example of your dynamic data. I have update the Plunker so you can see as an example where the template has multiple radio input selection, so two radio selection with different name. All depends of how is done your dynamic data.

Collectives™ on Stack Overflow

Angular:how to implement custom radio button dynamically in angular

4 Answers 4

5 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related