javascript - Angular $watch 输入邮件

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 回调中的任何表单错误。

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

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

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

Answer 1

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

如果你想检测输入的任何变化，你也应该使用 ng-change

作为这把 fiddle http://jsfiddle.net/p0qo4qst/

angular.module('app', [])

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

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

});

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

阅读更多信息 https://docs.angularjs.org/api/ng/type/form.FormController

$dirty boolean True if user has already interacted with the form.

$valid boolean True if all of the containing forms and controls are valid.

$invalid - boolean True if at least one containing control or form is invalid.