AngularJS ng-change not calling function

Question

I'm trying to get the content in a bootstrap popover to change when the user types something in the email text box. It seems that ng-change is not getting into the method updateToolTip(). I'm brand new to AngularJS. Any advice is appreciated.

html page

<div ng-controller="LoginController">

  <for name="form" ng-submit="login()">

    <input type="email" name="email" ng-model="user.email" value="{{user.email}}" ng-change="updateToolTip()" popover="{{emailMessage}}" popover-trigger="focus" popover-placement="right" required>

    <button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="form.$invalid">Sign in</button>
  </form>

</div>

js

var loginModule = angular.module('loginModule', ['ui.bootstrap']);

// Controller for the login page
loginModule.controller('LoginController', ['$scope', '$http', function($scope, $http) {

    $scope.emailMessage = 'test';   

    $scope.updateToolTip = function() {

        $scope.emailMessage = 'asdfsadf';   
        console.log();
        console.log(' inside function');
        if($scope.user != null) {
            console.log('user not null');
            if($scope.user.email.$dirty && $scope.user.email.$error.email) {
                console.log('email dirty and error');
                $scope.emailMessage = 'Invalid Email!';
            } else if($scope.form.email.$dirty && $scope.form.email.$error.required) {
                console.log('emaildirty and required');
                $scope.emailMessage = 'Email Required';
            }
        }
    }
}]);

Can you create a plunker / jsfiddle so we can see it in action? — jpmorin
– jpmorin, Commented Nov 8, 2013 at 22:56
@Catfish without going into the depths of your code, are you using Jquery as well ? I had problems with the two woking together and finally moved the JS loading into the page footer — avrono
– avrono, Commented Nov 8, 2013 at 22:57
Not related to the question, but when using ng-model on an input, there is no need to set the value attribute as it will be handled by ng-model! — jpmorin
– jpmorin, Commented Nov 8, 2013 at 22:57

Maxim Shoustin · Accepted Answer · 2013-11-08 23:39:52Z

4

Change form name to name="user". Like

 <form class="form-signin" name="user" ng-submit="login()">

Since you use form model like user.XXXX.

Demo Plunker

[EDIT]

I would write validation like this:

<input 
   type="email"
   name="email"
   class="form-control"
   placeholder="Email address"
   ng-model="user.email"
   popover="{{emailMessage}}"
   popover-trigger="focus"
   popover-placement="right"
   required
   >
    <span class="error" ng-show="mailform.email.$error.required">required</span>
    <span class="error" ng-show="mailform.email.$error.email">invalid email</span>


    <input 
    type="password"
    name="password"
    class="form-control"
    placeholder="Password"
    ng-model="user.password"
    value="{{user.password}}" required    >
    <span class="error" ng-show="mailform.password.$error.required">required</span>

Demo 2 Plunker

And maybe this example might help you as well: Demo 3 Plunker

edited Nov 8, 2013 at 23:39

answered Nov 8, 2013 at 23:18

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

4 Comments

Maxim Shoustin Over a year ago

@jpmorin this is a answer on his question, check the PLunker I posted, after define proper name for form, ng-chage works as expected

Catfish Over a year ago

Thanks for that. I really like this trick i see in your code {{user|json}}. Can you explain why when i'm typing in an email address, as you type, user.email disappears until it's a valid email?

Davin Tryon Over a year ago

@Catfish that happens because angular supports input with type="email". This type does not become valid until it is a valid email. The model is not set until it is valid.

Maxim Shoustin Over a year ago

@Catfish see "Demo 3", you don't need controller at all

Collectives™ on Stack Overflow

AngularJS ng-change not calling function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related