メールフィールドのフォーム検証を実装しようとしています。検証は次のように行う必要があります。
- 必要な属性にメールが入力されているかどうかを確認し、メールが入力されていない場合はメッセージを表示します
- 電子メールの形式が有効かどうかを確認し（属性を指定せずに自動的に実行されるようです）、形式が間違っている場合はメッセージを表示します
- $ http.get呼び出しで電子メールが一意であるかどうかを確認し、電子メールが見つかったために使用できない場合にメッセージを表示します
最初のメッセージが表示され、フィールドが空の場合、2番目のメッセージが表示され、電子メールが無効である場合、3番目のメッセージが表示されます。電子メールアドレスが見つかったため、一度に1つずつ一意ではありません。
これは、「required」属性のみで試してみると機能しますが、email-availableディレクティブ属性を追加するとすぐに、電子メールの形式がチェックされなくなり、email-availableディレクティブがrequired属性と一緒に実行されます。両方のメッセージがポップアップ表示されますが、ユーザーに一度に1つのメッセージだけが表示されるようにしたいと思います。
私はangularjs1.1.3を使用しています。
誰かが私が間違っているかもしれないことを教えてもらえますか？
HTML
<div id="user_mod" class="mod_form" ng-show="userModScreenIsVisible">
<form name="mod_user" novalidate>
<input type="email" name="email" ng-model="user.email" placeholder="E-Mail" required email-available/>
<div class="user-help" ng-show="mod_user.email.$dirty && mod_user.email.$invalid">Invalid:
<span ng-show="mod_user.email.$error.required">Please enter your email.</span>
<span ng-show="mod_user.email.$error.email">This is not a valid email.</span>
<span ng-show="mod_user.email.$error.emailAvailable">This email address is already taken.</span>
</div>
</form>
指令
directive('emailAvailable', function($http) { // available
return {
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
ctrl.$setValidity('emailAvailable', false);
if(viewValue !== "" && typeof viewValue !== "undefined") {
console.log("variable is defined");
$http.get('/api/user/email/' + viewValue + '/available')
.success(function(data, status, headers, config) {
console.log(status);
ctrl.$setValidity('emailAvailable', true);
return viewValue;
})
.error(function(data, status, headers, config) {
console.log("error");
ctrl.$setValidity('emailAvailable', false);
return undefined;
});
} else {
console.log("variable is undefined");
ctrl.setValidity('emailAvailable', false);
return undefined;
}
});
}
};
});