[解決済み] ユーザがフィールドを残した後にフィールドを検証する

質問

AngularJSで、私は ng-pristine または ng-dirty を使用して、ユーザーがフィールドに入力したかどうかを検出します。しかし、私は、ユーザーがフィールド領域を離れた後にのみ、クライアントサイドの検証を行いたいと考えています。これは、ユーザーが電子メールや電話などのフィールドを入力すると、完全な電子メールの入力を完了するまで常にエラーがスローされるため、最適なユーザーエクスペリエンスとは言えないからです。

例

UPDATEです。

Angularはカスタムblurイベントを同梱するようになりました。 https://docs.angularjs.org/api/ng/directive/ngBlur

どのように解決するのですか？

Angular 1.3ではng-model-optionsが追加され、オプションに { 'updateOn': 'blur'} を設定することができます。また、タイピングが速すぎる場合や、高価な DOM 操作を節約したい場合 (例えば、モデルが複数の DOM に書き込んでいて、キーを押すたびに $digest サイクルを実行したくない場合) には、デバウンスも可能です。

https://docs.angularjs.org/guide/forms#custom-triggers と https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates

デフォルトでは、コンテンツに変更があった場合、モデルの更新と フォームのバリデーションが行われます。この動作をオーバーライドするには ngModelOptions ディレクティブを使用して、指定されたイベントのリストにのみバインドするために、この動作を上書きすることができます。 例えば、ng-model-options="{ updateOn: 'blur' }"は、コントロールがフォーカスを失った後にのみ更新とバリデーションを行います。 は、コントロールがフォーカスを失った後にのみ、更新と検証を行います。スペースで区切られたリストを使用して、複数のイベントを設定することができます。 スペースで区切られたリストを使用して、複数のイベントを設定できます。例：ng-model-options="{ updateOn: 'mousedown blur' }"。

そしてデバウンス

モデルの更新/検証を遅らせるには、ngModelOptionsディレクティブでdebounceキーを使用します。 を ngModelOptions ディレクティブで指定します。この遅延は パーサー、バリデーター、そして $dirty や $pristine のようなモデルフラグにも適用されます。

例えば、ng-model-options="{ debounce: 500 }"は、トリガーする前に最後のコンテンツ変更から半秒間待ちます。 モデル更新とフォーム検証をトリガーする前に、最後のコンテンツ変更から半秒待ちます。 フォームのバリデーションを行います。