サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

AngularJS: フォームに入力されたデータを確かめる


AngularJSは、フォームに入力されたデータを、形式に応じたいくつかの条件で調べることができます。その結果によって、メッセージを表示してみましょう。なお、本稿のサンプルでは、JavaScriptコードは書きません。

01 AngularJSとBootstrapの設定

HTMLドキュメントの<head>要素には、つぎのようにAngularJS 1.4.9とともにBootstrap 3.3.6を読み込んでおきます。ともに、CDNを用いました。AngularJSとBootstrapのインストールと設定について、詳しくは「AngularJS入門 01: AngularJSを始める」01「AngularJSのダウンロードと設定」をお読みください。


<head>
<meta charset="UTF-8">
<title>Sample</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>

02 メールアドレスの入力フィールドをフォームに加える

<body>要素にはつぎのように<form>要素(name属性"myForm")を加え、メールアドレスの入力フィールドにする<input>要素(属性typeとnameはともに"email")をひとつ含めます(図001)。まだ、AngularJSの設定は行っていません。


<div class="container">
	<h3>メールアドレス確認</h3>
	<form name="myForm">
		<input type="email" name="email" class="form-control" placeholder="メールアドレス">
	</form>
</div>

図001■メールアドレスの入力フィールドが加えられたフォーム

図001

03 入力が適切でないときにメッセージを示す

AngularJSを働かせるため、大もとの<div>要素にng-appディレクティブ、<input>要素にはng-model("email")をつぎのように与えました(これらのディレクティブについて、詳しくは前出「AngularJS入門 01: AngularJSを始める」03「AngularJSでデータバインディングする」参照)。そして、ng-modelディレクティブに定めたオブジェクトのプロパティを、つぎのような<div>要素に与えた{{ }}で確かめてみましょう。フィールドに入力するテキストに応じて、それらのプロパティの値は変わります(図002)。入力したデータの形式が適切でない場合には、$invalidプロパティがtrueになります。このとき、メッセージを示すことにしましょう。


<div class="container" ng-app>
	<h3>メールアドレス確認</h3>
	<form name="myForm" novalidate>
		<input type="email" name="email" class="form-control" ng-model="email" placeholder="メールアドレス">
		<div>{{myForm.email}}</div>
	</form>
</div>

図002■ng-modelディレクティブに定めたオブジェクトのプロパティを確かめる

図002

ng-showディレクティブを定めた要素は、値がtrueと評価されるとき表示されます。 したがって、つぎの<div>要素のテキストは、フィールドに入力したメールアドレスが適切でないと示されます(図003)。なお、<form>要素に加えたnovalidate属性は、HTMLのデフォルトでなくAngularJSの検証機能を用いるという指示になります。 


<div class="container" ng-app>
	<h3>メールアドレス確認</h3>
	<form name="myForm" novalidate>
		<input type="email" name="email" class="form-control" ng-model="email" placeholder="メールアドレス">
		<div class="alert alert-danger" ng-show="myForm.email.$invalid">正しいアドレスを入力してください。</div>
	</form>
</div>

図003■メールアドレスのデータ形式が適切でないと警告を示す

図003

04 必須入力のフィールドとフォーカスの確認

もうひとつ、氏名を入力するための<input>要素(type属性"text")もつぎのように加えます。氏名は必ず記入しなければならないことにしましょう。この場合に加えるのが、ng-requiredディレクティブです。すると、入力があるまで$invalidプロパティはtrueになります。つまりこのままでは、氏名のフィールドには初めから警告が出たままになるということです(図004)。


<form name="myForm" novalidate>
	<div class="form-group">
		<input type="text" name="name" class="form-control" ng-model="user.name" ng-required="true" placeholder="氏名">
		<div class="alert alert-danger" ng-show="myForm.name.$invalid">氏名を入力してください。</div>
	</div>

</form>

図004■氏名の入力フィールドに初めから警告が示される

図004

そこで、ng-showディレクティブに、もうひとつ評価するプロパティとして、つぎのように$touchedを&&演算子で加えます。このプロパティ値は、フィールドをクリックするなどフォーカスが当たるまではfalseです。したがって、フォーカスしたのに入力がないとき初めて警告は示されます。


<form name="myForm" novalidate>
	<div class="form-group">
		<input type="text" name="name" class="form-control" ng-model="user.name" ng-required="true" placeholder="氏名">
		<div class="alert alert-danger" ng-show="myForm.name.$invalid && myForm.name.$touched">氏名を入力してください。</div>
	</div>

</form>

05 フィールドに最小文字数を定める

さらに、パスワードを入れる<input>要素(type属性"password")もつぎのように加え、最小文字数をng-minlengthディレクティブで定めましょう。与えた数値に満たないと、$invalidプロパティはtrueです。ただし、ng-requiredディレクティブは加えていませんので、未入力のときの値はfalseになります。


<form name="myForm" novalidate>

		<div class="form-group">
			<input type="password" name="password" class="form-control"
			ng-model="user.password" ng-minlength="6" placeholder="パスワード">
			<div class="alert alert-danger" ng-show="myForm.password.$invalid">パスワードは6文字以上にしてください。</div>
		</div>
</form>

これで<input>要素の種類に応じてデータを調べ、適切ではないときにフィールド下にメッセージを示すサンプルができました。<body>要素の記述は、つぎのコード001にまとめました。また、以下にサンプル001としてファイルをフレームに掲げています(フレームのソースでコードが確かめられます)。

コード001■フォームの<input>要素のデータに応じてフィールド下にメッセージを示す


<div class="container" ng-app>
	<h3>フォーム入力確認</h3>
	<form name="myForm" novalidate>
		<div class="form-group">
			<input type="text" name="name" class="form-control" ng-model="user.name" ng-required="true" placeholder="氏名">
			<div class="alert alert-danger" ng-show="myForm.name.$invalid && myForm.name.$touched">氏名を入力してください。</div>
		</div>
		<div class="form-group">
			<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="メールアドレス">
			<div class="alert alert-danger" ng-show="myForm.email.$invalid">正しいアドレスを入力してください。</div>
		</div>
		<div class="form-group">
			<input type="password" name="password" class="form-control"
			ng-model="user.password" ng-minlength="6" placeholder="パスワード">
			<div class="alert alert-danger" ng-show="myForm.password.$invalid">パスワードは6文字以上にしてください。</div>
		</div>
	</form>
</div>

サンプル001■フォームの入力が適切でないときはフィールド下にメッセージを示す

作成者: 野中文雄
作成日: 2016年2月5日

Copyright © 2001-2016 Fumio Nonaka.  All rights reserved.