Angular Form Validation Using Ng-Required

FIDDLE HERE: http://jsfiddle.net/TegFf/48/

I have a form with radio buttons (please Fiddle below) that should validate if:

  1. you choose a radio button that has a dollar amount associated
  2. you choose custom AND enter a value

My problem, I think, is that the Ng-Required I have put on an input field is not properly registering whether it is or is not required. 

<input name="donation" type="radio" value="yes" ng-model="manual" required="false">
<input type="number" ng-model="donation" ng-required="manual === 'yes'">

http://jsfiddle.net/TegFf/49/

Couple of things:

  • First radio input has a different name.
  • Wrapping the manual amount inside a label together with the radio button prevents you from focusing the field.
  • An AngularJS form is not valid until all fields are valid, so it's easier if you add more debug code to see which field is actually invalid.

Your first radio button needs to have 'name="donation"' added to it. Another issue is that once variable manual is set to 'yes', it will always stay yes. You should either reduce the number of your variables, or set up a custom validation in a directive.