AngularJS Validation - Multiple Controls and Conditional/Chain Validations -


using angularjs, how can validate if date2 < date1 , 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 greater 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 : date1 has greater date2)
  • date3 = 1/16/2013

  • user change date1 = 1/20/2013 (error disappears , date1 valid because date1=1/20/2013 greater date2=1/15/2013)
  • user change date2 = 1/30/2013 ---how trigger validation in date1 here message 'date1 has greater date2' , invalidate date1?

you can use function compare timestamps associated dates, :

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, can use ng-show

        <div ng-show='comparedates(obj.date1,obj.date2)'>date1 has greater date2</div>         <div ng-show='comparedates(obj.date2,obj.date3)'>date3 has greater date2</div> 

this comparison between dates, if want invalidate first date if second before/after, can use same function , set custom $error :

    $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 functions whenever want validate or not field, on fiddle added third parameter comparison function specify field has validated or not comparison, let check : http://jsfiddle.net/dotdotdot/zyf3u/3/

have fun


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -