javascript - 如何在Angular js中将ng-required修改为空和-1

Question

在我的表单中，如果值选择为空或-1。它应该返回“此字段是必需的”错误。

我找到了两个解决方案
1. ng-required 接受正则表达式。
2. 在指令中我们可以编写 ctrl.$validators.required...

但两者都不适合我。

我正在尝试将 ng-required 应用于空值和 -1 值。

控制指令

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's 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

Answer 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