私はAngularJSでパスワード/電子メールの確認指令を作成したいと思いますが、これまでに見たことのあるものは、DOMを大量に掘り下げたり、jQueryを利用したりしています。私ができるならば$ scopeのプロパティだけに依存したいと思います。それを行う最善の方法は何ですか?DOM操作やjQueryを使わずにAngularJSで電子メールやパスワードの確認を行う指示をするにはどうすればよいですか?
17
A
答えて
25
この種のディレクティブを実装するための多くの有用な方法を見て、DOM操作やjQueryを使用せずに行う方法を考え出しました。ここにはPlunk that shows howがあります。
それは使用することを含む:入力フィールド
- NG-モデルプロパティを$式を見る - 評価します。マッチ属性ディレクティブを追加するコントロールの$ modelValueに対して現在のスコープのコンテキストで "match"プロパティを使用します。
- $ invalidプロパティが基になるフォームでtrueの場合、送信ボタンを無効にします。
これは一部の人には便利だと思います。ここでは要点です:
var app = angular.module('app', [], function() {});
app.directive('match', function($parse) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
scope.$watch(function() {
return $parse(attrs.match)(scope) === ctrl.$modelValue;
}, function(currentValue) {
ctrl.$setValidity('mismatch', currentValue);
});
}
};
});
app.controller('FormController', function ($scope) {
$scope.fields = {
email: '',
emailConfirm: ''
};
$scope.submit = function() {
alert("Submit!");
};
});
次に、HTMLで:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="FormController">
<form name='appForm' ng-submit='submit()'>
<div class="control-group">
<label class="control-label required" for="email">Email</label>
<div class="controls">
<input id="email" name="email" ng-model="fields.email"
class="input-xlarge" required="true" type="text" />
<p class="help-block">[email protected]</p>
</div>
</div>
<div class="control-group">
<label class="control-label required" for="emailConfirm">Confirm Email</label>
<div class="controls">
<input name="emailConfirm" ng-model="fields.emailConfirm"
class="input-xlarge" required="true"
type="text" match="fields.email" />
<div ng-show="appForm.emailConfirm.$error.mismatch">
<span class="msg-error">Email and Confirm Email must match.</span>
</div>
</div>
</div>
<button ng-disabled='appForm.$invalid'>Submit</button>
</form>
</body>
</html>
1
これは私のためによく働く:
ディレクティブ:
angular.module('myApp').directive('matchValidator', [function() {
return {
require: 'ngModel',
link: function(scope, elm, attr, ctrl) {
var pwdWidget = elm.inheritedData('$formController')[attr.matchValidator];
ctrl.$parsers.push(function(value) {
if (value === pwdWidget.$viewValue) {
ctrl.$setValidity('match', true);
return value;
}
if (value && pwdWidget.$viewValue) {
ctrl.$setValidity('match', false);
}
});
pwdWidget.$parsers.push(function(value) {
if (value && ctrl.$viewValue) {
ctrl.$setValidity('match', value === ctrl.$viewValue);
}
return value;
});
}
};
}])
使い方
を<input type="email" ng-model="value1" name="email" required>
<input type="email" ng-model="value2" name="emailConfirm" match-validator="email" required>
表示エラー
<div ng-if="[[yourFormName]].emailConfirm.$error">
<div ng-if="[[yourFormName]].emailConfirm.$error.match">
Email addresses don't match.
</div>
</div>
+4
他の開発者がどのように動作するかを見ることができるように、フィドルを提供できますか?ありがとう –
関連する問題
- 1. 番号や電子メールを知らずにテキストメッセージ、電子メール、または電話を受けるにはどうすればいいですか?
- 2. ローカルコンピュータで電子メールの確認をテストするにはどうすればよいですか?
- 3. メール確認やパスワードのポリシー
- 4. 確認メールを作成するにはどうすればよいですか?
- 5. 電子メールを公開するにはどうすればよいですか?
- 6. Exchange EWS APIを使用して電子メールに応答するかどうかを確認するにはどうすればよいですか?
- 7. クロムエクステンションのコンテンツスクリプトで解析エラーをすばやく確認するにはどうすればよいですか?
- 8. jqueryのすべてのクラスに対してコードを実行するにはどうすればよいですか? (.clickや何かを使わずに)
- 9. tabViewで電子メール作成機能を使用するにはどうすればよいですか?
- 10. DoubleAnimationを1ずつ増やすにはどうすればよいですか?
- 11. イベントログにわかりやすいエラーメッセージを表示するにはどうすればよいですか?
- 12. 電子メールが有効かどうかを確認する
- 13. ユーザーとのやりとりを行わずに電子メールを確認する最も普遍的な方法は何ですか?
- 14. Macでデスクトップファイルやフォルダの場所を操作するにはどうすればよいですか?
- 15. 電子メールをユーザーに送信せずに電子メールアドレスを確認する
- 16. ウェブアプリケーション内にHTML電子メールを安全に表示するにはどうすればよいですか?
- 17. Java Eメール:「はい」や「いいえ」のように電子メールに投票ボタンを追加するには?
- 18. C#Asp.Net 2.0 - アクティブディレクトリのパスワードに対してパスワードを確認するにはどうすればよいですか?
- 19. DOMの代わりにHTML文書でjQueryを使用するにはどうすればよいですか?
- 20. Paypalの個人アカウントやビジネスアカウントを確認するにはどうすればよいですか?
- 21. Pythonで電子メールを確認する
- 22. Android携帯でアニメーション電子メール/ SMS通知を作成するにはどうすればよいですか?
- 23. (電子メール、パスワード)認証を使用するCASの設定を変更するにはどうすればよいですか?
- 24. 電子メールのバウンスやエラーをPHPで管理するには?
- 25. 電子メールが送信されることを確認するRspecコントローラテストを作成するにはどうすればよいですか?
- 26. コントローラーの操作中に検証結果を確認するにはどうすればよいですか?
- 27. テスト数を増やさずにPerlのTest :: Deep :: cmp_deeplyを使うにはどうすればいいですか?
- 28. eval()を使わずにjQueryで次の式を評価するにはどうすればよいですか?
- 29. 電子メール本文にHTMLタグを使用するにはどうすればよいですか?
- 30. Javaベースのシステムで電子メールを受信するにはどうすればよいでしょうか?
ええと、なぜdownvote?それ以外に "あなた自身の質問に答える/知識を共有する"機能があります。 Sheesh。 – JoshGough
あなたの意見は分かりません。どのようにすればいいのですか?質問をするときは、自分で答えることができれば知識を広めるように指定します。 – JoshGough
参照先:http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/ – JoshGough