How to set an input field to ng-invalid in angularJS

Question

I would like to check an input field for credit card numbers.

The field should remain invalid until it has a minimum length of 13. As the user should be able to fill in space into the field, I remove those spaces within a javascript function. In this function I would like to check the credit card number (without spaces) and set it to ng-invalid as long as the minimum length is lesser than 13 and the maximum length is greater than 16.

It should be something like this:

$scope.ccHandler = function() {
   if ($scope.ccNumber == '') {
      document.getElementById("ccProvider").disabled = false;
   }
   $scope.ccNumber = inputCC.value.split(' ').join(''); //entfernt die Leerzeichen aus der Kreditkartennummer vor der übergabe an den Server
   console.log("das ist meine CC: " + $scope.ccNumber);
   isValidCreditCardNumber($scope.ccNumber);
   getCreditCardProvider($scope.ccNumber);
   document.getElementById("ccProvider").disabled = true;
   if ($scope.ccNumber.length < creditCardNumberMinLength || $scope.ccNumber.length > creditCardNumberMaxLength) {
      //$scope.ccNumber.ng-invalid = true;
      console.log("ccNumber ist noch ungültig!");
      //document.getElementById("inputCC").$setValidity("ccNumber", false);
   }
}

This would be the part of the XHTML:

<div class="form-group" ng-switch-when="CreditCard">
   <label class="col-xs-3 col-sm-3 control-label">Kreditkartennummer</label> 
   <div class="col-xs-5 col-sm-5 col-md-5">
      <input name="ccNumber" class="form-control" type="text" id="inputCC" ng-change="ccHandler();updateCount()" ng-model="ccNumber" ng-required="true"/>
   </div>
</div>

How can I achieve this?

Please use ng-disabled instead of document.getElementById("ccProvider").disabled — Pieter Herroelen
– Pieter Herroelen, Commented Apr 10, 2014 at 9:17
You might want to check out the mask directive of angular ui: angular-ui.github.io/ui-utils/#/mask — Pieter Herroelen
– Pieter Herroelen, Commented Apr 10, 2014 at 9:50

Pieter Herroelen · Accepted Answer · 2016-01-18 10:48:23Z

33

You can do that with $setValidity. You need to set a name attribute on the <form> for this to work.

<form name="myForm">
   <input name="ccNumber" ng-model="ccNumber">
   <span ng-show="myForm.ccNumber.$error.minLength">
      A cc number should be minimum 10 chars
   </span>
</form>

Then you can manually set the validity with

$scope.myForm.ccNumber.$setValidity("minLength",$scope.ccNumber.length>=10);

Here is a working plnkr: http://plnkr.co/edit/7J326LR194SaoE2TmHuU?p=preview

edited Jan 18, 2016 at 10:48

answered Apr 10, 2014 at 9:50

Pieter Herroelen

6,0862 gold badges33 silver badges37 bronze badges

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

1 Comment

Pille Over a year ago

Thank you for that. Somehow setting validity this way it is ignored somehow. I don´t know why. The input field is within a div, and this div is within the form. That should be ok, doesn´t it?

Pille · Accepted Answer · 2014-04-10 11:05:14Z

20

The following code worked for me:

$scope.myForm.ccNumber.$setValidity("ccNumber", false);

answered Apr 10, 2014 at 11:05

Pille

1,1334 gold badges18 silver badges38 bronze badges

3 Comments

Steve Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post.

Pille Over a year ago

This is an answer to my post as it achieves what I searched for.

Pieter Herroelen Over a year ago

You are right, I didn't use $setValidity correctly. I've modified my answer.

Pieter Herroelen · Accepted Answer · 2014-04-10 08:44:43Z

4

You can use the standard ng-maxlength and ng-minlength attributes on your input field.

There is a working example in the AngularJS docs.

 <input type="text" name="lastName" ng-model="user.last" 
     ng-minlength="3" ng-maxlength="10">

answered Apr 10, 2014 at 8:44

Pieter Herroelen

6,0862 gold badges33 silver badges37 bronze badges

3 Comments

Pille Over a year ago

Thank you, but that I cannot use as spaces are removed within that input field (as I mentioned above). I need to track the length within a JS-function. I edited my question to make it more clear.

Pieter Herroelen Over a year ago

Why can't you remove the spaces and let the standard directives set the validity in the end?

Pille Over a year ago

The spaces are removed but the actual input within the field is being observed by ng-minlength and ng-maxlength and not the data being changed without spaces. So the problem is that those spaces are taken into account when checking min and max length.

Collectives™ on Stack Overflow

How to set an input field to ng-invalid in angularJS

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related