Radio button validation not working on FireFox

[Bruno Salmon]

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.

[Justin Walsh]

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

[Bruno Salmon]

he he, was so simple...

Thank you Justin!

[Creezy]

Thanks Justin, this was very helpful.