Conditional Validation in AngularJS

Question

I need to apply validation in the form field only if a certain condition is met. Let's say I have a form like this:

<div ng-controller="MyController"> <form name="myForm"> <div> <div class="" ng-class="{error: myForm.gender.$invalid}"> Gender: </div> Male <input type="radio" name="gender" value="M" ng-model="survey.gender" required/> Female <input type="radio" name="gender" value="F" ng-model="survey.gender" required/> </div> <div ng-show="survey.gender == 'F'"> <div class=""> Are you pregnant? </div> Yes <input type="radio" name="pregnant" value="Y" ng-model="survey.pregnant"/> No <input type="radio" name="pregnant" value="N" ng-model="survey.pregnant"/> </div> </form> </div> 

I want to make a pregnant question necessary only if the user selects a female gender. Does Angular support any validation for this?

Answer 1

Well, actually I just found a directive that does this. I need to add ng-required="survey.gender == 'F'" .

Now the code will look like this:

 <div ng-controller="MyController"> <form name="myForm"> <div> <div class="" ng-class="{error: myForm.gender.$invalid}"> Gender: </div> Male <input type="radio" name="gender" value="M" ng-model="survey.gender" required/> Female <input type="radio" name="gender" value="F" ng-model="survey.gender" required/> </div> <div ng-show="survey.gender == 'F'"> <div class=""> Are you pregnant? </div> Yes <input type="radio" name="pregnant" value="Y" ng-model="survey.pregnant" ng-required="survey.gender == 'F'"> No <input type="radio" name="pregnant" value="N" ng-model="survey.pregnant" ng-required="survey.gender == 'F'"> </div> </form> </div> 

Answer 2

Yes, see ng-required . The documentation is not good, but there are some.

Also here is a question that is similar to yours that was asked at an earlier date.