在 AngularJS 中使用指令时如何使表单无效 [英] How to invalidate a form when using directive in AngularJS

问题描述

我正在开发一个 SPA，这个应用程序中的一个表单使用一个输入屏蔽文本框，该文本框使用来自 这里

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

角度.module('app').directive('ipMask', [功能 () {返回 {限制:'A'，要求:'?ngModel',链接:函数(范围、元素、属性、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) {//?????????});}};}]);

我的表单代码看起来像

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

如果 IP 地址错误，我想使表单无效.即我期待 .ng-invalid 类同时出现在表单和控件上，直到它仍然无效.有什么建议 ?

解决方案

你不需要使用 $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);//组成 - 使用基于该库的任何验证技术ngModel.$setValidity('ip', valid);返回有效；});ngModel.$formatters.unshift(function(value) {var valid = isValid(value);ngModel.$setValidity('ip', valid);返回有效吗?值:未定义；});}

i am working on a SPA and a form inside this app uses an input masked text box implemented using a third party library from here

i created a directive to set a mask for an IP address

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) {
                        //????????
                    });
            }
        };
    }
]);

where my form code looks like

    <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>

i want to invalidate the form if the IP address is wrong. i.e. i am expecting .ng-invalid class both on the form and and the control as well until the time it remains invalid. any suggestions ?

解决方案

You don't need to use $watch. Just add a parser and/or formatter. Parsers are called when the view changes and formatters when the model changes. (This link can tell you more about those, as well as the other things available on ngModelController: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController). Here's an example:

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;
  });
}

这篇关于在 AngularJS 中使用指令时如何使表单无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！