Conditional Validation in AngularJS

Question

I need to apply a validation on a form field only if certain condition is met. 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 the pregnant question required only if user picks female gender. Does Angular provides any kind of validation for this?

Careful, I was just reading about a custody battle in New York where the father had carried the baby (was pregnant). Talk about a corner case! Or, rounded, I suppose... — Ben
– Ben, Commented May 16, 2014 at 1:14
You can check my details answer. stackoverflow.com/questions/45498708/… — Majedur
– Majedur, Commented Jul 26, 2020 at 6:53

jacoviza · Accepted Answer · 2015-02-18 17:42:41Z

16

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

The code would look like this now:

<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>

edited Feb 18, 2015 at 17:42

answered Jun 20, 2013 at 15:35

jacoviza

1,0182 gold badges10 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manveer Singh Over a year ago

Hi @jacoviza, I am trying to do same type of Implementation like, there are two buttons(save and submit), and on click of submit there is need of required field validation for a text box, not on click of save. Can u share some idea for it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Yes, take a look at ng-required. The documentation isn't good but there is some at that link.

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 20, 2013 at 15:40

hunt

781 silver badge10 bronze badges

Collectives™ on Stack Overflow

Conditional Validation in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related