Question

我试图通过在特定条件下将验证指令附加到元素来动态切换表单中的验证。这按预期工作，输入字段有效或无效，具体取决于指令是否附加且有效。但是，当我添加或删除指令时，输入字段会丢失它的$ dirty和$ touch。我有一个ng-class指令，应根据有效性更改类，但它不起作用。

输入字段如下所示，validateLogic函数返回true或false。

<input 
   name="testInput" 
   type="text"
   ng-class="{'error': testForm.testInput.$invalid && testForm.testInput.$dirty }"
   ng-model="testInput" 
   attach-directive="{'validate-test': validateLogic() }" 
/>

指令本身如下：

myApp.directive('attachDirective', function($compile, $timeout) {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
        scope.$watch(attrs.attachDirective, attachWatchAction, true);

        function attachWatchAction(newValue) {
            angular.forEach(newValue, function (value, key) {
                if (value) {
                    if (!element.attr(key)) {
                        var inputVal    = element.val();
                        element.attr(key, true);
                        $compile(element)(scope);

                        $timeout(function () {
                            element.val(inputVal);
                            scope.$apply();
                        }, 0);
                    }
                } else {
                    if (element.attr(key)) {
                        element.removeAttr(key);
                        $compile(element)(scope);
                    }
                }
            });
        }
    }
};
});

小提琴：http://jsfiddle.net/oligustafsson/f1wooqd5/

输入应该读＆＃34;测试＆＃34;验证

删除attach指令，只需使用validate指令即可。

有什么想法吗？

Answer 1

要回答我自己的问题，在验证中我可以将其设置为$ dirty：

ctrl.$formatters.unshift(function (value) {
    var valid = value === 'test';
    ctrl.$setValidity('validateTest', valid);

    if(!valid && value !== '') {
        ctrl.$dirty = true;
        ctrl.$pristine = false;
        ctrl.$touched = true;
        ctrl.$untouched = true;
    }

    return value;
});

小提琴：http://jsfiddle.net/oligustafsson/10gfnpe2/

在指令中动态附加验证不会更新类

1 个答案: