Question

我已使用自定义指令创建了自定义验证“ 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; 
                };
            }
        }
    };
});

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

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

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中有什么方法可以启用和禁用指令中的自定义验证。

Answer 1

您可以这样使用 ng-if ：

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

或代替ng-（如果您还可以使用 ng-show / ng-hide ）。根据您的要求使用。现在，您不必在JS中使用验证。请让我知道是否可行。

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

1 个答案: