formData not changing with ngChange hook

Question

I have a very basic scenario where in which I have a module with one controller:

var myModule = angular.module('myModule', []);

myModule.controller('myModuleCtrl', function ($scope, $http) {
    $scope.formData = {url:'',title:'',source:''};

    $scope.init = function() {
        $scope.formData.url = 'Test';
        $scope.formData.title = '';
        $scope.formData.source = '';
    };

    $scope.manageUrl = function() {
        alert('update');
    };
});

In my view I'm trying to hook the formData object properties to some form fields using ngModel. However my input doesn't update it's value after the init() method runs. If I add the ngChange directive and hook that up with the $scope.manageUrl() method, it only runs once, after my first keystroke/change of the input.

Am I missing something here? I've used both directives before without any problems. Only thing I can think of is something wrong with my module/controller setup?

This is what my view looks like:

<div ng-app="myApp" ng-controller="myModuleCtrl" ng-init="init()">
    <div>
        <form name="myForm">
            <div>
                <input type="url" ng-model="formData.url" ng-change="manageUrl()" />
            </div>
        </form>
    </div>
</div>

And my application.js bootstrapper:

var app = angular.module('myApp', ['myModule']);

Answer 1

It happens because of the url validator, note how the whole url property is removed until you enter a valid url, that's when you'll start to get your alerts back. Basically, once removed, the url is never considered to be changed until a valid (and different) url is input.

• url is set to 'Test'
• you type anything into the box, it fails the validation and becomes undefined
• it stays undefined until you enter a valid url (it's not changing)

Start typing http://anything and see what happens yourself:

var myModule = angular.module('myModule', []);

myModule.controller('myModuleCtrl', function ($scope, $http) {
    $scope.formData = {url:'',title:'',source:''};
    $scope.init = function() {
        $scope.formData.url = 'Test';
        $scope.formData.title = '';
        $scope.formData.source = '';
    };

    $scope.manageUrl = function() {
        alert('update');
    };
});

var app = angular.module('myApp', ['myModule']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myModuleCtrl" ng-init="init()">
    <div>
        <form name="myForm">
            <div>
                <input type="url" ng-model="formData.url" ng-change="manageUrl()" />
              
              <br>
              {{formData}}
            </div>
        </form>
    </div>
</div>

---

Am I missing something here? I've used both directives before without any problems. Only thing I can think of is something wrong with my module/controller setup?

The only logical solution that comes to my mind is that you've used a different input type before, so you were not a subject to validations. If you change the type to text, it works fine the whole time.