关于angularjs：Angular.js-ng-pattern为$ invalid时不触发ng-change


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

我正在使用ng-pattern来验证某些表单字段，并且正在使用ng-change来监视和处理任何更改，但是ng-change(或$ scope。$ watch)仅在form元素位于 $有效状态！ 我对angular还是陌生的，所以我不知道如何解决这个问题，尽管我怀疑应该采用新的指令。

在ng-pattern仍然像以前一样设置表单元素状态的情况下，如何在$ invalid和$ valid表单元素状态下触发ng-change？

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <form name="form">
        <input type="text" name="textbox" ng-pattern="/^[0-9]+$/" ng-change="change()" ng-model="inputtext"> Changes: {{ changes }}
    </form>

   
    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. When the form is in the $valid state, ng-change will fire.

   
    I would like ng-change to fire even when the the form is $invalid.

   
        form.$valid: <font color="red">{{ form.$valid }}</font>

Javascript：

1
2
3
4
5
6
angular.module('test', []).controller('controller', function ($scope) {
    $scope.changes = 0;
    $scope.change = function () {
        $scope.changes += 1;
    };
});

我创建了一个工作的JS小提琴，它显示了我遇到的问题。

http://jsfiddle.net/JAN3x/1/

顺便说一下，这个尖锐的问题似乎也很重要：
https://github.com/angular/angular.js/issues/1296

您可以使用ng-model-options更改输入的行为。

只要将此属性添加到您的输入中，就会触发ng-change事件：

1
      ng-model-options="{allowInvalid: true}"

参见：https://docs.angularjs.org/api/ng/directive/ngModelOptions

相关讨论

您只需要添加

1
 ng-model-options="{ updateOn: 'default' , allowInvalid:'true'}"

这表明可以使用未正确验证的值(而不是默认行为)来设置模型。

编辑ng-model-options不可用时回答此问题。请查看投票最高的答案。

您可以编写一个简单的指令来监听input事件。

HTML：

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

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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/

相关讨论

受李银刚的独到见解的启发：

他的解决方案存在有关ndModel更新的问题(请参阅他的帖子的评论)。

我的修复程序实质上更改了指令的作用域类型。它允许指令访问控制器范围(和方法)
然后，watch-change指令不再需要"评估指令"(change())，而仅需要"要调用的控制器方法的名称"(change)。

为了获得此函数中输入的新值，我传递了上下文(this =输入本身)。所以我可以获得它的值或任何属性。

这样，我们就不必关心ngModel的更新(或者表单是否无效，这是初始解决方案的另一个问题：如果表单无效，则删除ngModel)

HTML：

1
<input type="text" name="textbox" ng-pattern="/^[0-9]+$/" watch-change="change" ng-model="inputtext">

JAVASCRIPT：

1
2
3
4
5
6
7
8
9
10
app.directive('watchChange', function() {
    return {
        restrict : 'A',
        link: function(scope, element, attrs) {
            element.on('input', function(){
                scope[attrs.watchChange](this);
            })
        }
    };
});

演示：http://jsfiddle.net/msieurtoph/0Ld5p2t4/