Как изменить ng-обязательно для пустых и -1 в угловых js

0

В моей форме, если значение выбрано пустым или -1. он должен вернуть ошибку "Это поле обязательно".

Я нашел два решения для этого
1. ng-required принимает регулярное выражение.
2. В директиве мы можем написать ctrl. $ Validators.required...

но оба не работают для меня.

Я пытаюсь применить ng-required как для значения empty, так и для значения -1.

controlDirective

function selectControlDir()
    {
        return {
            transclude: true,
            restrict: 'E',
            require: 'ngModel',
            scope: {
              ngModel: '=',
              queObj: '='
            },
            template: '<div class="form-group">\n\
<label for="{{queObj._attributeName}}" class="col-sm-5 control-label">{{queObj._text}}</label>\n\
<div class="col-sm-6"><select {{queObj._attributeName}} ng-options="ans._value as ans._promptText for ans in queObj._answerOptions" ng-model="ngModel" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{queObj._attributeName}}" id="{{queObj._attributeName}}"></select>\n\
</div>'
            ,
            link: function (scope, element, attrs,ctrl)
            {
                if(angular.isUndefined(scope.ngModel))
                {
                    scope.ngModel = scope.queObj._pageAttributes.defaultValue;
                }
                // add a parser that will process each time the value is
                // parsed into the model when the user updates it.
                ctrl.$validators.required = (function (value) {
                    var valueToTest = value || '';
                    // if it valid, return the value to the model,
                    // otherwise return undefined.
                    scope.ngModel = valueToTest;
                    console.log('valueToTest='+valueToTest);
                    // ctrl.$setValidity('required', false);
                    return valueToTest.charAt(0) == '' || valueToTest.charAt(0) == '-1';
                });
            }
        };
    }

HTML

<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit(DTOstep1)" novalidate>
                <?php
                $this->load->view('themes/' . get_theme() . '/rc1/hidden');
                ?>
                <div ng-repeat="que in questions[$state.current.name]">
                    <div ng-if="que.QuestionData._fieldType === 'text'">
                        <text-control-dir ng-model="answers[que.QuestionData._attributeName]" data-que-obj="que.QuestionData"></text-control-dir>
                        <span class="form-error" ng-show="submitted && DTOstep1[que.QuestionData._attributeName].$error.required && DTOstep1[que.QuestionData._attributeName].$invalid">This field is required.</span>
                    </div>
                    <div ng-if="que.QuestionData._fieldType === 'select'">
                        <select-control-dir ng-model="answers[que.QuestionData._attributeName]" data-que-obj="que.QuestionData"></select-control-dir>
                        <span class="form-error" ng-show="submitted && DTOstep1[que.QuestionData._attributeName].$error.required && DTOstep1[que.QuestionData._attributeName].$invalid">This field is required.</span>
                    </div>
                    <div ng-if="que.QuestionData._fieldType === 'radio'">
                        <radio-control-dir ng-model="answers[que.QuestionData._attributeName]" data-que-obj="que.QuestionData"></radio-control-dir>
                        <span class="form-error" ng-show="submitted && DTOstep1[que.QuestionData._attributeName].$error.required && DTOstep1[que.QuestionData._attributeName].$invalid">This field is required.</span>
                    </div>

                </div>
                <div class="col-sm-5"></div>
                <div class="col-sm-6">
                    <input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
                    <input type="button" class="btn btn-info" name="formclone" value="+ Add More Cars"  ng-click="appendClonedDiv()" />
                </div>
            </form>

https://plnkr.co/edit/GA74YHNFxFb0ARg16Sjj?p=preview

Теги:

1 ответ

1
Лучший ответ

Вы должны создать пользовательский валидатор:

(function () {
    "use strict";

    angular.module("autoQuote")
      .directive('customRequired', customRequired);


    function customRequired(){
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel){
            ngModel.$validators.required = function(modelValue, viewValue) {
              var required = scope.$eval(attrs['customRequired']);
              var value = modelValue || viewValue;

              if ( (ngModel.$isEmpty(value) || value == -1) && required) {
                return false;
              }

              return true;
            };
        }
      }
    }

})();

Затем просто добавьте атрибут custom-required="requiredOrNot" в ваш select

Рабочий плункер https://plnkr.co/edit/8Sqm8zSALQNldMZ9cFNt?p=preview

Поделиться
  • 0
    Это работает, спасибо.
  • 0
    Отлично :) Я только что изменил одну вещь в директиве валидатора, так что возьмите с собой лут - должно быть более чисто.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню