CODEWITHSUNDEEP
javascripthtmlangularjs
user2820464
user2820464

Reputation:

required attribute with dynamic radio buttons (ng-repeat)

I am getting weird result when using the HTML5 'required' attribute for radio type inputs and Angularjs form validation

My input:

<form name="myForm">
    <div ng-repeat="i in [0,1,2]">
        <input type='radio' name='var1' ng-model='var1' value='1' required />1<br />
        <input type='radio' name='var1' ng-model='var1' value='2' required />2<br />
        <input type='radio' name='var1' ng-model='var1' value='3' required />3<br />
        <span ng-show="myForm.var1.$error.required" ng-click="">Choose an option.</span>
        <button ng-disable="myForm.$invalid">Submit</button>
    </div>
</form>

When I select one option the others get unselected. Also, the form validation is activated/deactivated for both.

Upvotes: 2

Views: 984

Answers (1)

NicolasMoise
NicolasMoise

Reputation: 7279

Yes this is because the "name" attribute is being repeated, try this instead:

<form name="myForm">
    <div ng-repeat="i in [0,1,2]">
        <input type='radio' ng-model='i.var1' value='1' required />1<br />
        <input type='radio' ng-model='i.var1' value='2' required />2<br />
        <input type='radio' ng-model='i.var1' value='3' required />3<br />
        <span ng-show="i.var1==''" ng-click="">Choose an option.</span>
        <button ng-disable="i.var1==''">Submit</button>
    </div>
</form>

Remove the name and do the form-validation/disabling straight with i.var1==''

Upvotes: 1

Related Questions