AngularJSアプリケーション開発ガイド

56

2

章 

AngularJS

アプリケーションの構造

コントローラの中では、

$valid

というプロパティを使ってデータが正当かどうかを知ることが

できます。フォーム内のすべてのフィールドの値が正当な場合に、

AngularJS

によってこのプロ

パティに

true

がセットされます。

$valid

を利用した処理にはさまざまなものが考えられます。例

えば、入力が完了していないフォームでは送信ボタンを無効化するといったことが可能です。

値が正当でない場合に送信できないようにするには、送信ボタンに

ng-disabled

属性を追加し

ます。

<button ng-disabled="!addUserForm.$valid">

送信

</button>

送信が成功したら、メッセージを表示させることにします。テンプレートの全文は次のようにな

ります。

<h1>

登録フォーム

</h1>

<form name="addUserForm" ng-controller="AddUserContro

ller">

<div ng-show="message">{{message}}</div>

<div>

ファーストネーム

: <input name="firstName" ng-model="user.first" required></div>

<div>

ラストネーム

: <input ng-model="user.last" required></div>

<div>

メールアドレス

: <input type="email" ng-model="user.email" ...