如何在角using指令时无效一种形式(how to invalidate a form when u

我工作的一个SPA和这个应用程序内部的形式使用使用从第三方库中实现的输入掩码文本框在这里

我创建了一个指令来设置一个IP地址掩码

angular
.module('app').directive('ipMask', [
    function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModel) {        
                    element.mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});
                    element.mask('099.099.099.099');

                    scope.$watch(attrs.ngModel, function (newValue, oldValue) {
                        //????????
                    });
            }
        };
    }
]);

在我的表单代码看起来像

    <div ng-controller="nodesListCtrl as vm">
        <form role="form" name="frmNode">

            <div class="form-group">
                <label>Node IP :</label>
                <input type="text" data-ip-mask ng-model="vm.myIp" name="CtrIp" class="input-sm form-control" placeholder="..." >
            </div>
        </form>
    </div>

我想，如果IP地址是错误的，无效的形式。 即我是形式和控制，以及直到它仍然是无效的时间都在期待.ng-无效的类。 有什么建议么 ？

Answer 1:

你不需要使用$watch 。 只需添加一个解析器和/或格式化。 当视图变化和格式化当模型改变解析器被调用。 （此链接可以告诉你更多关于这些，以及对ngModelController可用的其他东西： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ）。 下面是一个例子：

link: function (scope, element, attrs, ngModel) {        
  element.mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});
  element.mask('099.099.099.099');

  ngModel.$parsers.unshift(function(value) {
    var valid = isValid(value); // made up - use whatever validation technique based on that library
    ngModel.$setValidity('ip', valid);
    return valid;
  });

  ngModel.$formatters.unshift(function(value) {
    var valid = isValid(value);
    ngModel.$setValidity('ip', valid);
    return valid ? value : undefined;
  });
}

文章来源: how to invalidate a form when using directive in angular