AngularJS Validation - Multiple Controls and Conditional/Chain Validations

Question

Using AngularJS, how can you validate if date2 < date1 and date3 > date2.

<form name='myForm'>
       date1: <input type='text' name='date1' ng-model='obj.date1' required pattern='datePattern'/>
              <div ng-show='obj.date2 > obj.date1'>date1 has to be greater than date2</div>
       date2: <input type='text' name='date2' ng-model='obj.date2' required pattern='datePattern'/>
       date3: <input type='text' name='date3' ng-model='obj.date3' required pattern='datePattern'/>

       <input type='button' ng-click='saveData(obj)'/>
</form>

use case (user enters):

date2 = 1/15/2013
date1 = 1/14/2013 (error shows up : date1 has to be greater than date2)
date3 = 1/16/2013

user change date1 = 1/20/2013 (error disappears and date1 is now valid because date1=1/20/2013 which is greater than date2=1/15/2013)
user change date2 = 1/30/2013 ---how do i trigger the validation in date1 from here so the message 'date1 has to be greater than date2' and invalidate date1?

DotDotDot · Accepted Answer · 2013-08-16 08:44:49Z

you can use a function to compare the timestamps associated to the dates, something like this :

function ctrl($scope){
$scope.compareDates=function( first, second){
     dFirst=new Date(first);
     dSecond=new Date(second);
    console.log(first, second, dFirst, dSecond)
    return dFirst.getTime()<dSecond.getTime();
    }

}

then, you can simply use it for the ng-show

        <div ng-show='compareDates(obj.date1,obj.date2)'>date1 has to be greater than date2</div>
        <div ng-show='compareDates(obj.date2,obj.date3)'>date3 has to be greater than date2</div>

This is for the comparison between dates, if you want to invalidate the first date if the second is before/after, you can use the same function and set a custom $error like this :

    $scope.invalidate=function(item){
    console.log("invalidate")
    $scope.myForm[item].$setValidity("notGoodEnough", false);   
}
$scope.validate=function(item){
    console.log("validate")
    $scope.myForm[item].$setValidity("notGoodEnough", true);   
}

You can call those functions whenever you want to validate or not the field, on my fiddle I added a third parameter to the comparison function to specify which field has to be validated or not by the comparison, I let you check : http://jsfiddle.net/DotDotDot/zYF3U/3/

have fun

AlwaysALearner · Accepted Answer · 2013-08-16 08:29:54Z

1

Define a function on the scope that does the comparison. Something like this:

date1: <input type='text' name='date1' ng-model='obj.date1' 
required pattern='datePattern'/>
<div ng-show="compareDates(obj.date1, obj.date2)">
    date1 has to be greater than date2
</div>
date2: <input type='text' name='date2' ng-model='obj.date2' 
required pattern='datePattern'/>

JS:

function myController($scope){ 
    $scope.compareDates = function(d1,d2){          
        /* convert to date object assuming the input d1 = 2013-08-15 */         
        /* or some other valid format */
        d1 = new Date(d1);
        d2 = new Date(d2);          
        return d1 < d2;
    }
}

If you have the dates directly inside the scope of the controller, then you dont need to pass the dates to the function. You can simply do like this:

<div ng-show="compareDates()">date1 has to be greater than date2</div>

JS:

function myController($scope){ 
    $scope.obj = {};

    $scope.compareDates = function(){
        /* convert to date objects assuming valid inputs */         
        return new Date($scope.obj.date1) < new Date($scope.obj.date2);
    }
}

answered Aug 16, 2013 at 8:29

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

1 Comment

tsov Over a year ago

This will display the error message, but does not invalidate the control (date1). Your code is still very helpful. Thank you for the code.

Collectives™ on Stack Overflow

AngularJS Validation - Multiple Controls and Conditional/Chain Validations

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related