How can i compare two numbers inside input field using angularjs?

Question

I'm trying to match two randomly generated numbers. I want to add ng-invalid class if result wrongly enter. In the controller this function is generating the numbers.

AngularJs

    $scope.getRandomSpan = function(){
            return Math.floor((Math.random()*6)+1);
}

HTML

<span ng-init="a=getRandomSpan()">{{ a }}</span>
<span ng-init="b=getRandomSpan()"> + {{ b }}</span>

I want to validate the numbers once user enter number in input field.

<input type="number" ng-model="captcha" required />

For example function generate two numbers 2 and 3 (equal to 5), now i want to add ng-invalid class if entered number not equal to 5. I have done this task in the controller which is validating after submit the form.

var random =  $scope.a + $scope.b;
var enteredcaptcha =  $scope.captcha;
if(random == enteredcaptcha){...}

But i don't know how to validate on the spot, can any one guide me about this I will appreciate. Thank You for guideline

i think you should use the two way databinding

Ceylan Mumun Kocabaş
– Ceylan Mumun Kocabaş

2016-05-04 07:58:51 +00:00
Commented May 4, 2016 at 7:58 — Ceylan Mumun Kocabaş
– Ceylan Mumun Kocabaş, Commented May 4, 2016 at 7:58

Krupesh Kotecha · Accepted Answer · 2016-05-04 08:38:26Z

2

i have updated my code and it will display message if you enter correct value otherwise nothing happen

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.getRandomSpan = function() {
    return Math.floor((Math.random() * 6) + 1);
  }
  $scope.$watch("captcha", function() {
    var random = $scope.a + $scope.b;
    var enteredcaptcha = $scope.captcha;
    if (enteredcaptcha) {
      var myEl = angular.element(document.querySelector('#ans'));
      if (random == enteredcaptcha) {
        myEl.addClass("ng-valid").removeClass("ng-invalid");
      } else {
        myEl.addClass("ng-invalid").removeClass("ng-valid");
      }
    }
  });
});

#ans {
  display: none;
}

.ng-invalid{
  display:none !important;
}

.ng-valid{
  display:inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-init="a=getRandomSpan()">{{ a }}</span>
  <span ng-init="b=getRandomSpan()"> + {{ b }}</span>
  <input type="number" ng-model="captcha" />
  <span id="ans">excellent!!!!</span>
</div>

edited May 4, 2016 at 8:38

answered May 4, 2016 at 8:09

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

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

6 Comments

Ayaz Ali Shah Over a year ago

Thanks for sharing knowledge, its working fine as explain, but can we add ng-invalid class instead of alert("not equal");

Krupesh Kotecha Over a year ago

where you want to add class?

Ayaz Ali Shah Over a year ago

On same input but i'm not using jquery, so is this possible to add class using angularjs. Thanks for guiding me

Aaron Over a year ago

That's still not very angular-ish ;) I'd recommend either using ng-class or a custom validator (which seems overkill in this case). +1 for the effort though

Ayaz Ali Shah Over a year ago

@Aaron thanks for showing interest can you kindly explain.

|

Aaron · Accepted Answer · 2016-05-04 08:58:30Z

1

To conditionally set a class on an element, you can use the ngClass directive. It accepts 3 different syntaxes, but one of the simplest is the following :

<input type="number" ng-model="captcha" required ng-class="{'ng-invalid': a+b!=captcha, 'ng-valid': a+b==captcha}"/>

I assume that a, b and captcha are reachable from the input's scope.

Of course since the class you want to add is ng-invalid, you're trying to do form validation. A more integrated way to do this would be to use angular's custom validation.

answered May 4, 2016 at 8:58

Aaron

24.9k2 gold badges41 silver badges61 bronze badges

1 Comment

Aaron Over a year ago

I could expand on custom validation but I'm not proficient with validators nor directives, so I think reading the documentation will be best

Collectives™ on Stack Overflow

How can i compare two numbers inside input field using angularjs?

AngularJs

HTML

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

AngularJs

HTML

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related