Angular.jsのフォーム周りを実装してみる

Angular.jsのフォーム周りのバリデーションなどの実装を試してみます。

サンプルコード

HTML

<div ng-controller="form_Ctrl">
	<form name="sampleForm" novalidate>
		<dl>
			<dt>テキスト</dt>
			<dd>
				<input type="text" name="text" ng-model="sample.text" ng-required="true" ng-pattern="/^[a-zA-Z0-9]+$/">
				<div ng-show="sampleForm.text.$invalid">なにかエラーがあります。</div>
				<div ng-show="sampleForm.text.$valid">OKです。</div>

				<div ng-show="sampleForm.text.$error.required">必須項目です。</div>
				<div ng-show="sampleForm.text.$error.pattern">半角英数で入力して下さい。</div>

				<div ng-show="sampleForm.text.$pristine">入力値に変更がない時はここが表示されます。</div>
				<div ng-show="sampleForm.text.$dirty">入力値に変更があるとここが表示されます。</div>
			</dd>
		</dl>
		<dl>
			<dt>パスワード</dt>
			<dd>
				<input type="password" name="password" ng-model="sample.password" ng-minlength="8" ng-maxlength="16">
				<div ng-show="sampleForm.password.$invalid">入力内容が正しくありません。</div>
				<div ng-show="sampleForm.password.$valid">OKです。</div>

				<div ng-show="sampleForm.password.$error.minlength">8文字以上入力して下さい。</div>
				<div ng-show="sampleForm.password.$error.maxlength">16文字以下で入力して下さい。</div>
			</dd>
		</dl>
		<dl>
			<dt>メールアドレス</dt>
			<dd>
				<input type="email" name="email" ng-model="sample.email">
				<div ng-show="sampleForm.email.$error.email">メールアドレスが正しくありません。</div>
			</dd>
		</dl>
		<dl>
			<dt>数値</dt>
			<dd>
				<input type="number" name="number" ng-model="sample.number">
				<div ng-show="sampleForm.number.$error.number">数値が正しくありません。</div>
			</dd>
		</dl>
		<dl>
			<dt>URL</dt>
			<dd>
				<input type="url" name="url" ng-model="sample.url">
				<div ng-show="sampleForm.url.$error.url">URLが正しくありません。</div>
			</dd>
		</dl>
		<dl>
			<dt>チェックボックス</dt>
			<dd>
				<input type="checkbox" name="checkbox" ng-model="sample.checkbox">{{sample.checkbox}}
			</dd>
		</dl>
		<dl>
			<dt>ラジオ</dt>
			<dd>
				<input type="radio" name="radio2" ng-model="sample.radio2" value="ラジオ1">
				<input type="radio" name="radio2" ng-model="sample.radio2" value="ラジオ2">
				{{sample.radio2}}
			</dd>
		</dl>
		<dl>
			<dt>セレクト1</dt>
			<dd>
				<select name="select" ng-model="sample.select" ng-options="option.name for option in selectOptions">
					<option value="">-----</option>
				</select>
				{{sample.select}}
			</dd>
		</dl>
		<dl>
			<dt>セレクト2</dt>
			<dd>
				<select name="select2" ng-model="sample.select2" ng-options="option.text as option.name for option in selectOptions">
					<option value="">-----</option>
				</select>
				{{sample.select2}}
			</dd>
		</dl>
		<dl>
			<dt>セレクト3</dt>
			<dd>
				<select name="select3" ng-model="sample.select3" ng-options="key for (key, value) in selectOptions2">
					<option value="">-----</option>
				</select>
				{{sample.select3}}
			</dd>
		</dl>
		<dl>
			<dt>テキストエリア</dt>
			<dd>
				<textarea name="textarea" ng-model="sample.textarea" ng-maxlength="100"></textarea>
				<div ng-hide="sampleForm.textarea.$error.maxlength">残り:{{100 - sample.textarea.length}}文字</div>
				<div ng-show="sampleForm.textarea.$error.maxlength">100文字以下で入力して下さい。</div>
			</dd>
		</dl>
		<input type="submit" value="送信" ng-disabled="sampleForm.$invalid">
	</form>
</div>

JavaScript

angular.module('app', []).controller('form_Ctrl', function($scope) {

	$scope.sample = {};
	// 初期値設定サンプル
	$scope.sample.text = '初期値';
	$scope.sample.checkbox = true;
	$scope.sample.select2 = 'セレクト1';

	$scope.selectOptions = [
		{
			'name': 'select1',
			'text': 'セレクト1'
		}, {
			'name': 'select2',
			'text': 'セレクト2'
		}, {
			'name': 'select3',
			'text': 'セレクト3'
		}
	]

	$scope.selectOptions2 = {
		'セレクト1': 'select1',
		'セレクト2': 'select2',
		'セレクト3': 'select3'
	}
});

フォーム周り実装のデモページ
ブラウザによるHTML5のバリデーションを無効にするために、formタグにnovalidateを付与しています。
　

属性

バリデーション

各要素のバリデーションのチェックは、【formのname】.【バリデーション要素のname】.【チェック内容】のように記述します。
例えば、上記サンプルのパスワード部分で8文字以上入力しているかチェックしたい場合、sampleForm.password.$error.minlengthのようになります。
正しい場合はfalse、エラーがある場合はtrueが返ってくるので、ng-showでエラーの出し分けを行えます。

【参考サイト】

• AngularJS: Developer Guide: Forms
• AngularJSでFormの値の設定と取得例