Validate Radio Button AngularJS
Solution 1
Try using ng-required="!color"
. This makes it so that the field is only required when the value is not set. If a value is set, then required is removed and it will pass validation.
<input type="radio" ng-model="color" value="red" ng-required="!color"> Red <br/>
<input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/>
<input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>
Here is an updated plunker that demonstrates that the form now validates correctly: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview
Update
e-cloud's answer is simple and doesn't require an additional directive. I suggest everyone use that method if possible. Leaving this answer here as it does provide a working solution and demonstrates the use of the ng-required directive.
Solution 2
I think what you need is to add a name for the radio group, for a radio input need a name to determine which it belongs to, the link below works validation without ng-required(the accepted answer)
<input type="radio" name='group' ng-model="color" value="red" required> Red <br/>
<input type="radio" name='group' ng-model="color" value="green" required> Green <br/>
<input type="radio" name='group' ng-model="color" value="blue" required> Blue <br/>
http://plnkr.co/edit/LdgAywfC6mu7gL9SxPpC?p=preview
Related videos on Youtube
Spencer
Updated on July 05, 2022Comments
-
Spencer almost 2 years
This seems like it should be fairly easy, but I'm not finding the answer. I have a form where I need to validate that a selection has been made from a radio group. I tried using the 'required' attribute on the radio buttons, but when the form is validated it complains unless all the radio buttons are selected (which is impossible by design).
What is the proper way to validate a radio group selection in AngularJS?
<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController"> <input type="radio" ng-model="color" value="red" required> Red <br/> <input type="radio" ng-model="color" value="green" required> Green <br/> <input type="radio" ng-model="color" value="blue" required> Blue <br/> <tt>color = {{color | json}}</tt><br/> <button type="submit">Submit</button> </form>
Clicking the submit button in the Plnkr shows the behavior.
-
Spencer almost 10 years
ng-required
instead of justrequired
does it. Thanks. -
Taryn East over 9 yearsIf you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context.
-
jroot over 9 yearsSorry, this was supposed to be an alternative solution that works in Firefox (v 33.0). The currently accepted answer didn't work for me.
-
Taryn East over 9 yearscool, so this is a solution that works? If so, awesome. Possibly just the language in your answer doesn't make that super-obvious :)
-
PhiLho about 9 yearsWorks fine, and the name of the group is necessary for correct radio-button working, particularly if you have several groups in a form...
-
e-cloud over 8 years@CilliéMalan, i guess it's always working this way. At least from 1.2.
-
Robert Hickman over 8 yearsSomething important to note, is that a radio button group is considered valid regardless of an option being selected unless at least one of the radio buttons in a group has the
ng-model
attribute. -
jamiebarrow almost 8 yearsAnother thing to note is that this doesn't fix the issue where one wants to bind on the
$touched
or$dirty
property ofng-model
, but there is a workaround (at least for$dirty
) whereng-form
can be nested and referred to. See similar question here - stackoverflow.com/questions/22181462/… -
Rod Hartzell over 7 yearsBrilliant! Thank you.
-
Ahmed Hasn. over 6 yearsthis solution doesn't work, not even in the provided plnkr demo.
-
dmullings about 6 years@ConquerorsHaki It seems to be still working for me. You are allowed to submit the form when a value is selected. What are you seeing?
-
Ahmed Hasn. about 6 yearsexuse me @dmullings I must have confused the plnkrs. It indeed does work like a charm!
-
Dev01 about 6 yearsWhere is SaintScott's answer? Thanks!
-
dmullings about 6 years@TomKrones looks like his name was changed to e-cloud