how to do conditional maxlength in angularjs

Question

does anyone know how to do conditional maxlength in angularjs, I have found conditional required but not maxlength etc....

for example if maxlength given ...it should validate but if maxlength is 0 or false, it should not....

$scope.validation = {a: {required:true,minlength:5, maxlength:10}, 
                     b: {required:false,minlength:0, maxlength:false}}

Html gets created using ng-repeat loop....n now problem is maxlength gets fired everytime...whereas i have disabled it for second input field

<input type="text" name="myName" ng-model="name" ng-minlength='validation.a.minlength' ng-maxlength="validation.a.maxlength" ng-required='validation.a.required'  />


<input type="text" name="myName1" ng-model="name1" ng-minlength='validation.b.minlength' ng-maxlength="validation.b.maxlength" ng-required='validation.b.required' />

You can not add conditional attribute in angularjs. I also wanted conditional attributes, but they are not supporting this. You have to use ng-if or ng-show to handle your requirement.. — dhavalcengg
– dhavalcengg, Commented Jul 24, 2014 at 12:25
Have you tried using maxlength="{{validation.a.maxlength}}" instead of ngMaxlength directive? — xsh.7
– xsh.7, Commented Jul 24, 2014 at 12:32
Naeramarth - First thing wat you are saying is a input restriction not a validation of input. Secondly it will also force max length it won't allow you disable to maxlength factor — Luckyy
– Luckyy, Commented Jul 25, 2014 at 6:09
FYI -- there is an angularjs module that builds your form from provided metadata -- so no need to github.com/JustMaier/angular-autoFields-bootstrap — Martin
– Martin, Commented Jul 27, 2014 at 18:24
Can anyone tell me difference between using ng-required='validation.a.required' and ng-required='{{validation.a.required}}' because both works — Luckyy
– Luckyy, Commented Jul 30, 2014 at 6:44

Qustion · Accepted Answer · 2014-12-01 07:38:00Z

2

These parameters seems to work, if you use empty strings as "false" via angular expressions.

<input type="text" name="myName" ng-model="name" ng-minlength='{{validation.a.minlength}}' ng-maxlength="{{validation.a.maxlength}}" ng-required='validation.a.required'  />
<input type="text" name="myName1" ng-model="name1" ng-minlength='{{validation.b.minlength}}' ng-maxlength="{{validation.b.maxlength}}" ng-required='validation.b.required' />

  $scope.validation = {
    a: {required:true, minlength:5, maxlength:10}, 
    b: {required:false, minlength:'', maxlength:''}
  }

~~plunker~~

plunker for 1.3.2

Now its possible to use 0 and Number.MAX_SAFE_INTEGER to ignore this rules. Or maybe just 999 will be enough :)

 b: {required:false, minlength:0, maxlength:Number.MAX_SAFE_INTEGER}

edited Dec 1, 2014 at 7:38

answered Jul 25, 2014 at 18:48

Qustion

3013 silver badges12 bronze badges

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

3 Comments

Luckyy Over a year ago

Thats great Breath....thank you and I agree with your example at plunker, but am bit surprised I tried your idea of empty strings, still it dint work for me....it just throws too long error on entering first alphabet....but same is working at plunker

ragamufin Over a year ago

This does not seem to work with later versions of angular. Changing the plunker to 1.3.1 for instance produces the OP's problem again

Qustion Over a year ago

Things look more natural with the 1.3

Collectives™ on Stack Overflow

how to do conditional maxlength in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related