AngularJS にカスタム フォーム検証を追加する
検証は、入力データの正確性をスキャンするプロセスであり、通常はエラー修正またはデータの一貫性を目的としています。 AngularJS カスタム検証は、開発者がカスタム検証ルールを作成できる強力なライブラリです。
この記事では、AngularJS のカスタム検証についてすべて説明します。 フォームバリデーターから始めましょう。
AngularJS のフォームバリデーター
Angular がサポートする基本的な形式には 2 種類あります。
- テンプレート主導のフォーム
- リアクティブフォーム
テンプレート駆動型フォームは、宣言的で使いやすく、十分にテストされたフォーム作成方法を提供します。 これは Angular のデフォルト フォームです。
リアクティブ フォームは、フォームの動作をより詳細に制御できる、より低レベルの API です。 オブザーバブルやイベント エミッターなどのリアクティブ データ ソースを使用するように設計されています。
フォーム内のすべてのフィールドは FormControl として機能し、フォームが有効かどうか、実際のフィールド値、その他の詳細など、そのフィールドに関する特定の情報を返します。
AngularJS のカスタム バリデーター
Angular には、Validator API と呼ばれるデータを検証するための組み込みシステムがあります。 ただし、より複雑な検証ルールの場合、または検証ルールがアプリケーションに固有のものである場合は、カスタム バリデーターを使用できます。
Angular のカスタム バリデーターは、開発者が外部ライブラリに依存せずに独自の検証ルールを作成できるため、非常に便利です。 また、開発者が Angular やその他のアプリケーション パーツの外に検証ロジックを拡張することもより簡単になります。
AngularJS カスタム検証は、jQuery などの他の検証ライブラリと一緒に使用できますが、必須ではないことに注意してください。
AngularJS でカスタム フォーム検証を作成または追加する手順
次の手順は、AngularJS カスタム フォーム検証の作成をガイドします。
- 新しい AngularJS プロジェクトを作成します。
index.htmlファイルにng-bootstrapCSS ファイルを含めます。index.htmlファイルにng-bootstrapJavaScript ファイルを追加します。- HTML ページに入力フィールドを持つカスタム フォームを作成し、それを
index.htmlのボディ セクションに含めます。 - Angular コントローラーを作成し、
index.htmlに追加します。 - Angular フォーム ディレクティブを作成し、それを
index.htmlに追加します。 - フォームコントローラーを角度コントローラーに挿入します。
AngularJS でのカスタム フォーム検証の例について説明しましょう。
HTML コード:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
</head>
<body ng-app="FormValidationExample">
<div ng-controller="ctrlForm">
<form name="myForm" novalidate>
<div class="input-item">
<label for="txtEmail">Your email</label><br>
<input type="email" name="email" id="txtEmail" class="text-box" ng-model="email" required custom-focus />
<div class="error-wrapper" ng-show="myForm.email.$dirty && myForm.email.$invalid && !myForm.email.$focused">
<span ng-show="myForm.email.$error.required">Email is required</span>
<span ng-show="myForm.email.$error.email">Please enter a valid email address</span>
</div>
</div>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</body>
</html>
JavaScript コード:
angular.module('FormValidationExample', [])
.controller('ctrlForm', ['$scope', function($scope) {
$scope.checkboxes_motives = { 'checked': false, items: {} };
$scope.choices = ['work', 'play'];
$scope.selectAllMotives = function(value) {
angular.forEach($scope.choices, function (motive) {
$scope.checkboxes_motives.items[motive] = value;
});
};
}])
.directive('customFocus', [function() {
var FOCUS_CLASS = "custom-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
}
}]);
この例では、電子メール アドレスを検証しました。 ここに間違ったメール アドレスを入力すると、修正するまで、または修正しない限り、エラーが表示されます。
ここ をクリックして、上記のコードのライブ デモンストレーションを確認してください。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook