6

私は恐ろしいangular page on form validationを読んだだけで何かを見逃してしまったでしょうが、ng-model-optionsdebounceプロパティを特定のバリデーターにどのように適用できますか?ただ1つのバリデータでデバウンス

問題を説明しましょう。私は公開鍵を検証するフォームを持っており、そのために複数のバリデーターを含むkey-checkというディレクティブがあります。それらのうちのいくつかはキーのフォーマットのようにローカルで同期しており、キーがサーバー上で(非同期に)利用可能かどうかをチェックする別の非同期があります。

私はクールな子供たちがデバウンス呼び出し、私の入力は何かのように思えることを使用私のサーバーは、洪水でもそう遅くするために、角度のアプリケーションになりたくない:

<input type="text" ... ng-model="key" key-check ng-model-options="{ debounce: 700 }" ng-minlength="5" ng-maxlength="50"/> 

そして、ディレクティブが似ています:

ctrl.$validators.keyFormatCheck = function(modelValue) { 
    // return boolean 
} 

ctrl.$asyncValidators.KeyAvailabilityCheck = function(modelValue) { 
    // return promise 
} 

それは魔法のように仕事だが、すべてのチェックが700msの待ち時間で行われ、それはそれでデバウンスとKeyAvailabilityCheckなしkeyFormatCheckを行うことが可能ですかしら。私はおそらく$タイムアウトで古い良い方法を使用することができますが、私はそれを行うことを好む角の方法

アイデア?

+0

あなたあなたのディレクティブに常にパラメータを渡すことができます –

+0

私のディレクティブにプロパティを追加できないという問題はありません。問題は、ディレクティブ内で、どのようにバリデーターにデバウンスを設定できますか? –

+0

それに応じて$ timeoutを追加します –

答えて

5

ngModelControllerdebounceは、パーサー、バリデーター、ビュー変更リスナー(例:ng-change)のパイプライン全体に適用されます。

ngModelOptionsで現在の方法(角度v1.4)は、debounceの遅延を特定のバリデータに分離する方法はありません。

しかし機能は、簡単に独自の非同期バリディレクティブに遅延パラメータを渡すことによって達成される:

<input ng-model="val" foo-validator="{delay: 500}"> 

あなたは$timeoutと実際の遅延を実装します。ここでは「角度の方法」よりも幾分小さいという理由で$timeoutを使用することを避ける理由はありません。そうではありません。

新しいトリックを実行する前に、以前の保留中の検証要求をキャンセルすることを忘れないでください。

var pendingValidation; 
ngModel.$asyncValidators.foo = function(modelValue, viewValue){ 

    if (pendingValidation) $timeout.cancel(pendingValidation); 

    pendingValidation = $timeout(function(){ 
    pendingValidation = null; 

    // returns promise or value 
    return doAsyncValidation(); 
    }, delay); 

    return pendingValidation; 
}; 

delay結合単離スコープ(scope: {config: "=fooValidator"})と、直接権利範囲に対する属性発現を-ing $evalを使用することによってのいずれかで、foo-validator属性を介してパラメータから得ることができる。

var config = $scope.$eval(attrs.fooValidator); 
var delay = config.delay; 
+1

だから、すべてのパイプラインではなくバリデータに直接debounceプロパティを適用する方法はありません。 おかげで、 –

+0

@ThomasLeduc、そうではありません。それが満足できるかどうかは、Angularチームと一緒に取り上げることができます。私の意見では、これはフレームワーク用に実装するユースケースが狭すぎるかもしれません –

+0

あなたはおそらく正しいでしょう...しかし、それは狭くない、基本的なケースです。 –

関連する問題