LoginSignup
4

More than 5 years have passed since last update.

さんじゃらっと Angular JS part2

Posted at

前回のさんじゃらっと Angular JSに続いて、
主に投稿フォームで便利そうな機能を利用していきます。

必須項目

ng-show は、trueであれば中にある DOM を表示します。
それを利用して、フォームが空の時にメッセージを出します。

index.html
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<div>
    <form name="form" class="css-form" novalidate>
        名前:<input type="text" ng-model="user.name" name="uName" required="" />
        <div ng-show="form.uName.$error.required">名前は必須です.</div>
    </form>
</div>
</body>
</html>

文字数カウント

よくある文字数カウントもカンタンです。

index.html
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
    <textarea cols="60" rows="10" ng-model="mystring"></textarea>
    <p><span>{{ mystring.length }} 文字</span></p>
</body>
</html>

リセットボタン

リセットボタンが押された際に、全項目に空を代入します。

index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
    <div ng-controller="myController">
      <form novalidate class="simple-form">
        Text:       <input type="text" ng-model="test.text" /><br />
        Radio:      <input type="radio" ng-model="test.radio" value="male" />A
                    <input type="radio" ng-model="test.radio" value="female" />B
        <br>
        CheckBox:   <input type="checkbox" ng-model="test.check" />
        <br>
        <input type="button" ng-click="reset()" value="Reset" />
      </form>
    </div>
    <script>
      angular.module('myApp', [])
        .controller('myController', ['$scope', function($scope) {
          $scope.master = {};
          $scope.reset = function() {
            $scope.test = angular.copy($scope.master);
          };
          $scope.reset();
        }]);
    </script>
</body>
</html>

文字数制限

ng-minlengthやng-maxlengthを設定してバリデートできます。

index.html
<!DOCTYPE html>
<html lang="ja" ng-app="">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
  <body>
    <div>
      <form name="myForm">
        Name: <input type="text" ng-model="user.name" name="uName" ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.uName.$error.minlength">短い</span>
        <span class="error" ng-show="myForm.uName.$error.maxlength">長い</span>
      </form>
    </div>
  </body>
</html>

正規表現によるバリデート

ng-showを更に応用して正規表現による複雑なチェックもできます

index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.js"></script>
</head>
<body>
<form name="form" class="css-form" novalidate>
  <div>
    E-mail:<input type="email" ng-model="myEmail" name="validateEmail" />
    <br>
    <span ng-show="form.validateEmail.$error.email">メールアドレスが正しくありません</span><br>
    </div>
</form>
<script>
    var app = angular.module('myApp', []).directive('validateEmail', function() {
      var EMAIL_REGEXP = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
      return {
        require: 'ngModel',
        restrict: '',
        link: function(scope, elm, attrs, ctrl) {
          if (ctrl && ctrl.$validators.email) {
            ctrl.$validators.email = function(modelValue) {
              return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
            };
          }
        }
      };
    });
</script>
</body>
</html>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4