Angularjs добавляет и удаляет пользовательскую директиву проверки на основе другого элемента - PullRequest
Новая
       22

Angularjs добавляет и удаляет пользовательскую директиву проверки на основе другого элемента

0 голосов
/ 21 июня 2019

Я создал пользовательскую проверку «validateSprequired» с использованием пользовательской директивы.

Мне нужно проверить элемент на основе флажка, если флажок установлен, мне нужно игнорировать проверку, если флажок не установлен, мне нужно проверить элемент с пользовательской проверкой.

Я пытался использовать, если условие на HTML и Javascript также, но я не могу удалить активировать и деактивировать пользовательские проверки.

мой 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 есть ли способ включить или отключить пользовательскую проверку из директивы.

1 Ответ

0 голосов
/ 21 июня 2019

Вы можете использовать нг-если так: 

<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. Пожалуйста, дайте мне знать, если это работает.

...