2015年6月3日水曜日

AngularJSで、フォームの入力チェック

AngularJSで、フォームの入力チェックを設定してみました。ng-modelとして定義されたデータは、入力状態やデータの検証を行うことができるようになるらしい。

<form name="inquiryForm" action="inquiry" ng-submit="inquiryPost()" method="post" novalidate>
  <input type="text" name="username" ng-model="inquiry.username" required ng-minlength="2" ng-maxlength="20">
  <span ng-show="inquiryForm.username.$error.required">必須</span>
  <span ng-show="inquiryForm.username.$error.minlength">文字数が足りません。</span>
  <span ng-show="inquiryForm.username.$error.maxlength">長すぎです。</span>

  <input type="email" name="email" ng-model="inquiry.email" required>
  <span ng-show="inquiryForm.email.$error.required">必須</span>
  <span ng-show="inquiryForm.email.$error.email">正しいメールアドレスをどうぞ。</span>

  <input class="btn btn-primary" type="submit" value="送信">
</form>

実際に設定してみたサイトがこちら


参考サイト
フォームの基本を学ぼう(ドットインストール)
input[email](AngularJS)

0 件のコメント:

コメントを投稿