Hi Bruno
You need to give the radio input elements a name (the same name)
<label>
<input name="gender" type="radio" ng-model="male" ng-value=
"true" ng-required="true" />Male</label>
<label>
<input name="gender" type="radio" ng-model="male" ng-value=
"false" ng-required="true" />Female</label>
Then simply set ng-required to true on one (or both) of the elements.
http://jsfiddle.net/jeLxwd24/
Regards
Justin
On Monday, October 13, 2014 8:09:00 PM UTC+2, Bruno Salmon wrote:
>
> Hi,
>
> My problematic is quite simple and probably common but I couldn't find a
> solution on internet...
>
> I'm working on a form asking for personal details and it has a Gender
> section with Male and Female radio buttons which are initially not set
> (people must tick one of the radio buttons to validate the form).
>
> You can see my implementation here: http://jsfiddle.net/u15ejcwf/
>
> There is 1 single model ($scope.male) and ticking the Male button set it
> to true whereas ticking the Female button set it to false.
> I make the Male radio button required while none of the buttons are ticked
> (to prevent validation). This is done with ng-required="male!==false &&
> male!==true"
>
> This implementation works fine on all browsers except FireFox when the
> Female tickbox is ticked: the Male button is circled in red and remains
> invalid.
> It seems that the ng-required doesn't change to false on FireFox when the
> male model is set.
>
> It looks like a Angular bug, but I can't find a workaround.
> Any idea how to fix this problem?
>
> Thanks
> Bruno.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
