前回のさんじゃらっと Angular JSに続いて、
主に投稿フォームで便利そうな機能を利用していきます。
必須項目
ng-show は、trueであれば中にある DOM を表示します。
それを利用して、フォームが空の時にメッセージを出します。
index.html
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<div>
<form name="form" class="css-form" novalidate>
名前:<input type="text" ng-model="user.name" name="uName" required="" />
<div ng-show="form.uName.$error.required">名前は必須です.</div>
</form>
</div>
</body>
</html>
文字数カウント
よくある文字数カウントもカンタンです。
index.html
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<textarea cols="60" rows="10" ng-model="mystring"></textarea>
<p><span>{{ mystring.length }} 文字</span></p>
</body>
</html>
リセットボタン
リセットボタンが押された際に、全項目に空を代入します。
index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<div ng-controller="myController">
<form novalidate class="simple-form">
Text: <input type="text" ng-model="test.text" /><br />
Radio: <input type="radio" ng-model="test.radio" value="male" />A
<input type="radio" ng-model="test.radio" value="female" />B
<br>
CheckBox: <input type="checkbox" ng-model="test.check" />
<br>
<input type="button" ng-click="reset()" value="Reset" />
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.master = {};
$scope.reset = function() {
$scope.test = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
</body>
</html>
文字数制限
ng-minlengthやng-maxlengthを設定してバリデートできます。
index.html
<!DOCTYPE html>
<html lang="ja" ng-app="">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<div>
<form name="myForm">
Name: <input type="text" ng-model="user.name" name="uName" ng-minlength="3" ng-maxlength="10">
<span class="error" ng-show="myForm.uName.$error.minlength">短い</span>
<span class="error" ng-show="myForm.uName.$error.maxlength">長い</span>
</form>
</div>
</body>
</html>
正規表現によるバリデート
ng-showを更に応用して正規表現による複雑なチェックもできます
index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<form name="form" class="css-form" novalidate>
<div>
E-mail:<input type="email" ng-model="myEmail" name="validateEmail" />
<br>
<span ng-show="form.validateEmail.$error.email">メールアドレスが正しくありません</span><br>
</div>
</form>
<script>
var app = angular.module('myApp', []).directive('validateEmail', function() {
var EMAIL_REGEXP = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
return {
require: 'ngModel',
restrict: '',
link: function(scope, elm, attrs, ctrl) {
if (ctrl && ctrl.$validators.email) {
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
};
}
}
};
});
</script>
</body>
</html>