他のドロップダウン値のドロップダウン基準の$ dirtyおよび$ invalid状態を設定する方法

Question

角度フォーム検証を適用する2つのドロップダウンがあります。

<form name="newForm" data-ng-submit="save(newForm.$valid)" novalidate="novalidate"> 
     <select ng-model="val.selectOne" name="selectOne" ng-change="setValidation(val.selectOne)" data-ng-class="{ 'error': newForm.selectOne.$dirty && newForm.selectOne.$invalid }" required="required"> 
      <option>A</option> 
      <option>B</option> 
      <option>C</option> 
      <option>D</option> 
      <option>E</option> 
     </select> 
      <div data-ng-messages="newForm.selectOne.$error" data-ng-show="newForm.selectOne.$touched || newForm.$submitted"> 
      <div class="error-message" data-ng-message="required">Please enter value</div> 
      </div> 
     <select ng-model="val.selectTwo" name="selectTwo" data-ng-class="{ 'error': newForm.selectTwo.$dirty && newForm.selectTwo.$invalid }" required="required"> 
      <option>Val1</option> 
      <option>Val2</option> 
      <option>Val3</option> 
     </select> 
      <div data-ng-messages="newForm.selectTwo.$error" data-ng-show="newForm.selectTwo.$touched || newForm.$submitted"> 
       <div class="error-message" data-ng-message="required">Please enter value</div> 
      </div> 

     <button type="submit">Save</button> 
    </form> 

ユーザがオプションCとDを選択したときに、2番目のドロップダウンで保存時の検証をしたくない場合。私のディレクティブコードで ： -

scope.setValidation = function (value){ 
    if (value == "C" || value == "D") { 
     scope.newForm.selectTwo.$invalid = true; 
     scope.newForm.selectTwo.$touched = true; 
     scope.newForm.selectTwo.$dirty = true; 
    } 
} 

私は検証がCとDのための真述べて設定しようとしていますが、それが動作していません。誰も私にこれのための効率的な方法を教えてもらえますか？

Answer 1

この目的のために、ユーザーが 'c'または 'd'を選択してそれに応じて検証できるカスタムディレクティブを作成できます。また、選択オプションにvalue属性を指定してください。下のコードを見てください。

<form name="newForm" data-ng-submit="newForm.$valid && save(newForm.$valid)" novalidate="novalidate"> 
    <select ng-model="val.selectOne" name="selectOne" data-ng-class="{ 'error': newForm.selectOne.$dirty && newForm.selectOne.$invalid }" required="required"> 
     <option value="A" >A</option> 
     <option value="B" >B</option> 
     <option value="C" >C</option> 
     <option value="D" >D</option> 
     <option value="E" >E</option> 
    </select> 
     <div data-ng-messages="newForm.selectOne.$error" data-ng-show="newForm.selectOne.$touched || newForm.$submitted"> 
     <div class="error-message" data-ng-message="required">Please enter value</div> 
     </div> 
    <select custom="{{val.selectOne}}" ng-model="val.selectTwo" name="selectTwo" data-ng-class="{ 'error': newForm.selectTwo.$dirty && newForm.selectTwo.$invalid }" required="required"> 
     <option value="Val1">Val1</option> 
     <option value="Val2">Val2</option> 
     <option value="Val3">Val3</option> 
    </select> 
     <div data-ng-messages="newForm.selectTwo.$error" data-ng-show="newForm.selectTwo.$touched || newForm.$submitted"> 
      <div class="error-message" data-ng-message="required">Please enter value</div> 
     </div> 
<div ng-if="newForm.selectTwo.$error.someerror && newForm.$submitted" > 
     <div class="error-message" data-ng-message="required">Please dont select 'C' or 'D'</div> 
    </div> 



    <button type="submit">Save</button> 
</form> 


app.directive("custom", [function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attr, ctrl) { 
     function customValidator(ngModelValue) { 
      var limit = attr.custom; 
      if (limit !='C' && limit != 'D') { 
       ctrl.$setValidity('someerror', true); 
      } else { 
       ctrl.$setValidity('someerror', false); 
      } 


      return ngModelValue; 
     } 
     ctrl.$parsers.push(customValidator); 

    } 
    } 
}]); 

ユーザーが最初の選択ボックスから「C」または「D」を選択してフォームを送信すると、エラーが表示されます。