Angular.js - ng-change not firing when ng-pattern is $invalid

Question

I am using ng-pattern to validate some form fields, and I am using ng-change with it to watch and process any changes, however ng-change (or $scope.$watch) will only fire when the form element is in the $valid state! I'm new to angular, so I don't know how to solve this issue, although I suspect a new directive is the way to go. How can I get ng-change to fire in both $invalid and $valid form element states, with ng-pattern still setting the form element states as before? Html: ```

Type in any amount of numbers, and changes should increment.

Now enter anything that isn't a number, and changes will stop incrementing. When the form is in the $invalid state, ng-change doesn't fire.

Now remove all characters that aren't numbers. It will increment like normal again.…

Accepted Answer

Edit This was answered when `ng-model-options` was not available. Please see the top-voted answer.

you can write a simple directive to listen `input` event.

HTML:

```
<input type="text" name="textbox" ng-pattern="/^[0-9]+$/" watch-change="change()" ng-model="inputtext"> Changes: {{ changes }}
```

JS:

```
app.directive('watchChange', function() {
    return {
        scope: {
            onchange: '&watchChange'
        },
        link: function(scope, element, attrs) {
            element.on('input', function() {
                scope.$apply(function () {
                    scope.onchange();
                });
            });
        }
    };
});
```

http://jsfiddle.net/H2EAB/

Angular.js - ng-change not firing when ng-pattern is $invalid

Solution

Problem