さんじゃらっと Angular JS part2

前回の[さんじゃらっと Angular JS](http://qiita.com/araya/items/70146cc0179dcfa8fc5b)に続いて、
主に投稿フォームで便利そうな機能を利用していきます。

##必須項目
ng-show は、trueであれば中にある DOM を表示します。
それを利用して、フォームが空の時にメッセージを出します。

```lang: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>
```

##文字数カウント
よくある文字数カウントもカンタンです。

```lang: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>
```

##リセットボタン
リセットボタンが押された際に、全項目に空を代入します。

```lang: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を設定してバリデートできます。

```lang: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を更に応用して正規表現による複雑なチェックもできます

```lang: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>
```