2016-07-27 5 views
0

値が空または-1に選択されている場合、私のフォームにあります。 「このフィールドは必須です」というエラーが返されます。空の場合はng-requiredを、角jの場合は-1を修正する方法

この2つの解決策が見つかりました。
1. ng-requiredは正規表現を受け入れます。
2.私たちはctrlを書くことができます。$ validators.required ...

しかし、どちらも私のために働いていません。

ng-requiredを空の値と-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'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

答えて

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; 
      }; 
     } 
     } 
    } 

})(); 

は、それからちょうどを追加あなたのselect

の作業plunkerへ属性https://plnkr.co/edit/8Sqm8zSALQNldMZ9cFNt?p=preview

+0

その作業のおかげ。 –

+0

偉大な:)私はちょうどバリデータディレクティブの1つの事を変更しているので、そこで戦利品を取る - よりきれいにする必要があります。ありがとう。 – krutkowski86

+0

ありがとうございます。いくつかのフィールドにさらに検証を追加しようとしています。私は要素の名前、idを持っています。名前または任意のカスタムのデータ属性にディレクティブを作成できますか? –

関連する問題