AngularJS:文字長バリデートチェックのサンプル

goto_jp 1,445views 更新:2014年4月30日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/dHBnp

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app>
  <div ng-controller="mainCtrl">
    <form novalidate name="myForm" ng-submit="submitForm()">
      <textarea name="text" ng-model="user.text" ng-maxlength="32"></textarea>
      <div ng-show="myForm.text.$valid">{{32 - user.text.length}}</div>
      <div class="error" ng-show="myForm.text.$error.maxlength">32文字以下にしてください。</div>
    </form> 
    <pre>{{user|json}}</pre>
  </div>
</body>

5行目のテキストエリアを「ng-maxlength=”32″」で32文字までの制限をかけています。

6行目では「ng-show=”myForm.text.$valid”」と入力状態が正であれば表示するようにし、テキストエリア内の残り文字数カウントも表示させています。

7行目では文字数制限を越えた際の表示を置いています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません