Angular Radio Buttons Multiple Forms

Question

I'm having a hell of a time with Radio buttons. Happy Tuesday.

I have multiple names, a form for each name, and the ability to select a name as a "primary name". Each name can be edited and submitted independently. When a name is selected as "primary" (1) the others are set to 0.

In the function updatePrimary(), I have it setting the correct name's primary_name value to 1, and the rest to 0. But the other radio buttons are not un-selecting their radio buttons (well there should only be one other selected anyway).

Like this :

<ng-include src="'app/names/__edit.html'" ng-repeat="name in names track by $index"></ng-include>

<!-- __edit.html -->
<form name="names[$index]">
    <input name="primary_name" class="form-control" type="radio" ng-click="updatePrimary($index)" ng-model="name.primary_name" ng-value="name.primary_name" ng-checked="<% name.primary_name == 1 %>"/>
</form>

What I don't understand is where I'm binding name.primary_name to the button, giving it the condition to be checked (== 1), then why when I update the model is the display not updating? Just to reiterate, it's correct in the model, this is a UI / binding issue.

Another thing to note - I have a button to save, that's enabled when the form is dirty. Selecting the radio button does not trigger this. The button is as such :

<button class="name-save" ng-disabled="names[$index].$pristine" ng-click="save($index)">Save</button>

IF the radio buttons are in different form then you can't reset them on another selection all should be in one form — ngCoder

Shoaib Khan Shoaib Khan · Accepted Answer · 2017-06-07T11:29:49

Try this :

<ng-include src="'app/names/__edit.html'" ng-repeat="name in names track by $index"></ng-include>

<!-- __edit.html -->
<form name="names[$index]">
<input id="radio_{{$index}}" name="primary_name" class="form-control" type="radio" ng-click="updatePrimary($index)" ng-model="name.primary_name" ng-value="name.primary_name" ng-checked="<% name.primary_name == 1 %>"/>

Using a dynamic id on the radio input fields should solve the problem.

Also keep in mind that ng-repeat does not work on forms. Forms will not get repeated. You have to use ng-form to repeat forms.

Angular Radio Buttons Multiple Forms

1 Answers