Radio button in formArray

Question

I'm working on a form that has a formArrayName in which I want to make use of a radio button. The problem is that all these radio buttons have the same name so when I'm clicking one, all the other radio buttons turn off.

If I give the radio button a name with an index (name[i]) I get the error message:

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: If you define both a name and a formControlName attribute on your radio button, their values must match. Ex: <input type="radio" formControlName="food" name="food">

I can't find out how to fix this. I can't give the index to the init function because the index of the array can change. Below is an example of my code:

Edit: Made a Plunker example: http://plnkr.co/edit/o2ZxAFsuhD0F7OKevqei?p=preview

Anyone able to help me?

Thresh · Accepted Answer · 2016-08-09 14:05:48Z

2

You need to let angular set the name property of input:

<input type="radio" [attr.name]="'sex' + i" value="male"> male
<input type="radio" [attr.name]="'sex' + i" value="female"> female

answered Aug 9, 2016 at 14:05

Thresh

95314 silver badges23 bronze badges

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

1 Comment

Jeffrey Over a year ago

Updated my question with a Plunker example. Your solution does not seem to work.

Arcade · Accepted Answer · 2017-01-04 13:27:22Z

1

Leaving out the name property fixed the issue for me.

answered Jan 4, 2017 at 13:27

Arcade

7362 gold badges7 silver badges17 bronze badges

Comments

Jeffrey · Accepted Answer · 2016-08-22 12:31:58Z

-1

It seems technically impossible without using multiple form elements.

answered Aug 22, 2016 at 12:31

Jeffrey

2,0051 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

Radio button in formArray

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related