Question

我正在尝试编写一个指令来处理表单输入错误。到目前为止它看起来像这样：

directive('input', function() {
    return {
        restrict: 'E',
        scope: true,
        link: function (scope, element, attrs, ctrls) {
            var name = attrs.name;
            scope.$watch(attrs.ngModel, function () {
                console.log(name + ' changed');
            });
        }
    };
});

在html中：

<input type="text" ng-model="data.text">

这样我就可以检查$ watch回调中的任何表单错误。

但是，它不适用于具有input[type="email"]属性的required，并且无法弄清楚为什么在这种情况下不会触发$watch回调。

以下是使用不同输入组件来说明这一点的示例：http://jsfiddle.net/g0atq0z4/

知道在这种情况下如何检测ngModel何时发生变化？

Answer 1

因为它会在arroba之后触发事件，请尝试“abc @”

如果要检测输入的任何更改

，也应该使用ng-change

作为这个小提琴http://jsfiddle.net/p0qo4qst/

angular.module('app', [])

.controller('TestCtrl', function ($scope) {

    $scope.changed = function (){
        console.log('changed');
    };

});

此外，您可以在表单中使用输入，这将为您提供$ dirty，$ valid和$ invalid状态。

在https://docs.angularjs.org/api/ng/type/form.FormController

了解详情

$ dirty boolean如果用户已经与表单进行了交互，则为True。

$ valid boolean如果包含所有包含的表单和控件，则为True   有效的。

$ invalid - boolean如果至少有一个包含控件或表单，则为True   无效。

Angular $ watch输入电子邮件

1 个答案: