Required/ngRequiredのカスタムディレクティブ

Question

必要に応じてドロップダウンを検証したいと考えています。デフォルトの値は、値がnullまたは空白の場合にのみ機能します（私が間違っている場合は修正してください）。値が 'に割り当てられていない場合、エラーを出してフォームを無効にする必要があります。'が必要です。

<select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required></select> 

私はエラーメッセージを表示することができますが、これはフォーム無効

<span class="error" ng-show="applications.first == 'not assigned'?true:false">Select Approver</span> 

がSOLUTION作るん、これを使用する： -

1）あなたは必要を使用したい場合は、シャノンをチェックHochkinsソリューション。

<form name="formName"> 
     <select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required="true"> 
     <option value="">Not Assigned</option> 
     </select> 
     <span class="error" ng-show="formName.first.$invalid ?true:false">Select Approver</span> 
     <pre>{{formName | json}}</pre> 
</form> 

Heブランク値<option value="">Not Assigned</option>のオプションを追加しました。選択時にrequired="true"と設定します。これは完全に機能します。

2）カスタムディレクティブの使用。

app.directive('req', [ 
     function() { 
      var link = function($scope, $element, $attrs, ctrl) { 
       var validate = function(viewValue) { 
        var comparisonModel = $attrs.req; 
        var invalid = $attrs.invalid; 
        if (viewValue == invalid) { 
         // It's valid because we have nothing to compare against 
         ctrl.$setValidity('req', false); 
        } else { 
         ctrl.$setValidity('req', true); 
        } 
       }; 
       $attrs.$observe('req', function(comparisonModel) { 
        // Whenever the comparison model changes we'll re-validate 
        return validate(ctrl.$viewValue); 
       }); 
      }; 
      return { 
       require: 'ngModel', 
       link: link 
      }; 

     } 
    ]); 

し、HTMLコード：ここで

<select invalid="not assigned" req={{applications.first}} name="first" class="select" ng-model="applications.first" ng-options="x.id as x.value for x in list1" title="Select Approver" ></select> 
<span class="error" ng-show="Step5.first.$error.req">Select Approver</span> 

あなたはinvalid="not assigned"またはinvalid='0'またはinvalid=' 'などの任意の値を設定する必要があります。ディレクティブでは、値が一致すると無効な属性と比較され、エラーが表示されます。

Answer 1

select要素に必要な値を追加すると、FORMオブジェクトを使用して、フィールドが有効かどうかを確認できます。

フォーム名を使用して、フォームのフィールドにアクセスして有効性を確認することもできます。 「デフォルト」オプションを追加する場合は、ドロップダウンに必要なドロップダウンメニューで技術的に無効な空の値を持つオプションを追加できます。有効な場合は非表示にして、正しいオプションが選択された後にユーザーが再度選択できないようにすることができます。あなたのコントローラー、セットアップインサイド

<form name="formName" ng-controller="testCtrl"> 
    <select name="first" ng-options="x.id as x.value for x in list1" ng-model="applications.first" required> 
     <option value="" ng-hide="formName.first.$valid">Not Assigned</option> 
    </select> 
    <pre>{{formName.first.$invalid | json}}</pre> 
</form> 

いくつかのオプション：

angular.module('sandbox', []).controller('testCtrl', function($scope) { 

    $scope.list1 = [{ 
    id: 1, 
    value: 'apples' 
    }, { 
    id: 2, 
    value: 'oranges' 
    }]; 
}); 

デモ：https://jsfiddle.net/suunyz3e/304/