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?

Neural

Answer 1

It seems technically impossible without using multiple form elements.

Neural

Answer 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

Gleesome

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

Answer 3

Leaving out the name property fixed the issue for me.

Paleolithic