未对输入更改调用指令

Directive not called on input change

本文关键字:调用 指令 输入      更新时间:2023-10-19

我面临一个似乎无法解决的问题。我有几个输入,每个输入都有一个指令来验证输入值,如下所示:

<div class="row form-group">
        <div class="col-sm-6">last name</div>
        <div class="col-sm-6">
            <div class="input-group" ng-class="{'has-error': form.lastname.$invalid && (form.lastname.$touched || form.$submitted)}">
                <input type="text" name="lastname" class="form-control"
                       model-blur
                       validator-lastname
                       ng-trim="true"
                       ng-model="fields.lastname.value"
                       ng-maxlength="fields.lastname.validation.maxLength">
                <input-group-addon class="input-group-addon"
                                       iga-char=""
                                       iga-form="form"
                                       iga-field="form.lastname"
                                       iga-if-touched="true">
                </input-group-addon> 
            </div>
            <form-message-list fml-form="form"
                                   fml-field="form.lastname"
                                   fml-label="Last name"
                                   fml-fieldData="fields.lastname">
            </form-message-list>
        </div>
    </div>

该字段需要以下模式:/^[''a-zA-Z_]+( [''a-zA-Z_]+)*$/

我的问题是:当我在输入中添加一个无效值时,如以下所示:/,我的无效消息将保留,无效模式将保留在字段中

当我把这个模式添加到我的字段中时,就像ng-pattern="/^[''a-zA-Z_]+( [''a-zA-Z_]+)*$/"一样,我没有任何问题。但是,当我尝试通过我的指令validator lastname进行验证时,它只检查一次。当我用无效值填充输入,然后将其更改为空(这是允许的)时,ng无效模式错误仍然存在。

这是我的指示:

angular.module('app')
    .directive('validatorLastname', validatorLastname);
/* @ngInject */
function validatorLastname() {
    var directive = {
        require: 'ngModel',
        link: link
    };
    return directive;
    function link(scope, element, attrs, modelCtrl) {
        var valid = false;
        var formatter = function (inputValue) {
            if (inputValue) {
                var res = inputValue.match(/^[''a-zA-Z_]+( [''a-zA-Z_]+)*$/);
                if (res && res.length > 0) {
                    valid = true;
                }
                modelCtrl.$setValidity('pattern', valid);
                valid = false;
            }
            return inputValue;
        };
        modelCtrl.$parsers.push(formatter);
        if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {
            formatter(scope[attrs.ngModel]);
        }
    }
}

我制作了一个JSFiddle来重现这个问题:http://jsfiddle.net/sZZEt/537/

我希望有人能给我指明正确的方向。提前谢谢。

您应该更新指令代码以使一切正常工作。

angular.module('app')
.directive('validatorLastname', validatorLastname);
/* @ngInject */
function validatorLastname() {
    var directive = {
        require: 'ngModel',
        link: link
    };
    return directive;
    function link(scope, element, attrs, modelCtrl) {
        var valid = false;
        var formatter = function (inputValue) {
            if (inputValue) {
                var res = inputValue.match(/^[''a-zA-Z_]+( [''a-zA-Z_]+)*$/);
                if (res && res.length > 0) {
                    valid = true;
                }
                modelCtrl.$setValidity('pattern', valid);
                valid = false;
            }else{
                modelCtrl.$setValidity('pattern', true);  
            }
            return inputValue;
        };
        modelCtrl.$parsers.push(formatter);
        if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {
            formatter(scope[attrs.ngModel]);
        }
    }
}

我为您的问题创建了一个plunk。。。这是因为如果inputValue为null,那么您的$setValidity方法将不会调用,也无法再次执行验证。您应该在else部分内部将模式有效性设置为true。如果您想使字段对无输入有效。您现在可以参考更新的plunkhttps://plnkr.co/edit/N3DrsB?p=preview