1

次のようなangularjsのメールフィールドを検証しようとしています:

<input type="email" ng-model="email" class="form-control" name="email" ng-required="true" placeholder="Email Address">
<span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>

すべて期待どおりに機能しますが、ユーザーが「.」を入力すると「有効な電子メールが必要です」というエラー メッセージが表示されるため、ユーザー エクスペリエンスが低下します。ユーザーが入力を続けると非表示になります。メール@メールだから。は無効ですが、email@email.com は有効です。

問題は、ユーザーが入力を完了する前に検証が行われるのが速すぎることです。

$touched フラグを使用してこれを解決しようとしましたが、ユーザーが最初に電子メールを入力したときにのみ解決されます。メールを修正するために戻ったときに、「.」を入力するとエラー メッセージが点滅することになります。またはドメイン名の「-」。

誰かがこれを何とか解決しましたか？

4

2 に答える 2

2

. _ ng-model-options_ これをアプリ レベルでも提供できるため、すべての sに適用できます。これにより、ユーザーが入力からフォーカスを外すと、検証とモデルの更新がトリガーされます。オプションも付いています。ng-model-options="{updateOn:'blur'}"ng-modeldebounce

 <input type="email" ng-model="email" class="form-control" name="email" 
        ng-required="true" ng-model-options="{updateOn:'blur'}" 
        placeholder="Email Address" />
  <span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>


angular.module('app', []).controller('ctrl', function($scope) {

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="loginForm">
    <input type="email" ng-model="email" class="form-control" name="email" ng-required="true" ng-model-options="{updateOn:'blur'}" placeholder="Email Address">
    <span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>
    {{email}}
  </form>
</div>

于 2015-01-15T16:38:27.890 に答える