2016-07-13 8 views
0

属性の値として入力を持つカスタムバリデータがあるとします。そして、私たちは、カスタムバリデータを使用しようとしているフォームを作成カスタムバリデータの有効範囲の変更に対するトリガ検証

$scope.isRequired = false; 

$scope.toggle = function() { 
    $scope.isRequired = !$scope.isRequired; 
}; 

:私たちは、変数の値を切り替えるには、変数や関数を定義する範囲で

app.directive('inputRequired', function() { 
    return { 
     require: 'ngModel', 
     scope: { 
      inputRequired: '=' 
     }, 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.inputRequired = function(modelValue) { 
       return !(scope.inputRequired && ctrl.$isEmpty(modelValue)); 
      }; 
     } 
    }; 
}); 

。トグル機能を呼び出すためのボタンも追加します。

<form> 
    <input type="text" ng-model="someModel" input-required="isRequired"/> 
    <button ng-click="toggle()">toggle</button> 
</form> 

これはどのように動作しますか?フォームが読み込まれ、スコープが初期化されると、isRequiredの値はfalseに設定されます。したがって、入力フィールドは必須ではありません。トグルボタンをクリックすると、isRequiredの値がtrueに変更されます。しかし!バリデータのスコープの変数が変更されたにもかかわらず、バリデーションはトリガされません。

重要な注記:これは一例に過ぎません。私はこの機能を実装しているng-required指令を知っています。バリデーターに入力があり、フィールドの有効性がその入力に依存する場合の一般的な解決策が必要です。入力が変更された場合は、フィールドを直ちに再検証する必要があります。

答えて

1

だけで解決策を見つけた:

app.directive('inputRequired', function() { 
    return { 
     require: 'ngModel', 
     scope: { 
      inputRequired: '=' 
     }, 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.inputRequired = function(modelValue) { 
       return !(scope.inputRequired && ctrl.$isEmpty(modelValue)); 
      }; 

      scope.$watch("inputRequired", function() { 
       ctrl.$validate(); 
      }); 
     } 
    }; 
}); 
:inputRequired変更を検証し、リンク機能のスコープにウォッチャを追加し、$を呼び出します
関連する問題