angularjs - Angularjs基于其他元素添加和删除自定义指令验证

问题描述

我使用自定义指令创建了自定义验证“validateSprequired”。

我需要基于复选框验证元素，如果选中复选框，我需要忽略验证如果未选中复选框，我需要使用自定义验证来验证元素。

我也尝试在 html 和 javascript 上使用 if 条件，但我无法删除激活和停用自定义验证。

我的 HTML

<input name="checkboxes" ng-model="vm.Assessment.infoOnly" id="checkboxes-0"
       type="checkbox"  value="true" ng-click="vm.isInfoOnly($event)">

<input name="peoplepicker" id="peoplepicker" validate-sppprequired="true" 
       type="text" ng-model="vm.Assessment.AssessmentDueDate">

控制器代码

 vm.isInfoOnly = function (event) {     
    var elem = $("#peoplepicker");
    if (event.target.checked) {            
        elem.attr('validate-sppprequired', false);              
        elem.removeAttr("validate-sppprequired");
        vm.Assessment.LeadCommentator.errors.validateSppprequired == true;  --> not working
    } else {               
        elem.attr('validate-sppprequired', true);              
    }
    setTimeout(function () {
        $scope.$apply(function () {
            $compile(elem)($scope);
        });
    });
}

我的指令

mainApp.directive('validateSppprequired', function ($compile) {
    return {
        require: '?ngModel',     
        scope: {
            ngModel: '=',  
            validateSppprequired: "="
        },
        link: function (scope, element, attributes, ngModel) {

            if (attributes.validateSppprequired == "false") {
                                                   -->not working
                ngModel.$validators.validateSppprequired = function (modelValue, viewValue) {
                    return true;
                }
                //ngModel.$validators.validateSppprequired = true; --> not working
                //ngModel.$setValidity("validateSppprequired", true); --> not working
                ngModel.$validate();
                return true;
            } else {
                ngModel.$validators.validateSppprequired = function (modelValue, viewValue) {
                    if (ngModel.$isEmpty(modelValue) || modelValue.length == 0) {
                        return false;
                    } else {                       
                        return true;
                    }
                    return false; 
                };
            }
        }
    };
});

我的要求是如果选中复选框，则必须清除此自定义验证，如果未选中复选框，则必须应用此自定义验证。

如果我开始在 peoplepicker 文本中输入文本，则此验证有效，但复选框更改无效

angularjs 在复选框更改事件上添加“ng-valid”“ng-invalid”css 类，因此 angularjs 始终仅被视为无效

在复选框选中事件 angularjs 添加下面的 CSS 到文本框

ng-pristine ng-untouched ng-isolate-scope ng-invalid ng-invalid-validate-sppprequired ng-valid ng-scope ng-valid-validate-sppprequired

在复选框未选中的事件 angularjs 上添加下面的 css 到文本框

ng-pristine ng-untouched ng-isolate-scope ng-invalid ng-invalid-validate-sppprequired ng-scope ng-valid-validate-sppprequired

在 angularjs 中有什么方法可以启用和禁用指令中的自定义验证。

标签： angularjsvalidationangular-directive

<input name="peoplepicker" id="peoplepicker" validate-sppprequired="true" type="text" ng-model="vm.Assessment.AssessmentDueDate" ng-if="vm.Assessment.infoOnly"> <input name="peoplepicker" id="peoplepicker" validate-sppprequired="false" type="text" ng-model="vm.Assessment.AssessmentDueDate" ng-if="!vm.Assessment.infoOnly">

angularjs - Angularjs基于其他元素添加和删除自定义指令验证

问题描述

解决方案

推荐阅读