Ruby on Rails Tutorial　登録フォームにAngularJSのバリデーションチェック、エラー表示を追加

wp-admin

3年前

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回作成したユーザー登録フォームにAngularJSのバリデーションチェック、エラー表示を追加します。

（１）仕様
　
１）フォーム全体
　
・すべてがOKになると背景色をライトグリーン、それ以外はライトピンク。
・すべてがOKにならないとSubmitボタンをdisable
　
２）各フォームの項目
　
①名前
・必須項目、最大20文字。
　
②メールアドレス
・必須項目、フォーマットは、デフォルトでChromiumで使用してる正規表現チェックを行っているようなので、それを使用。
　
③パスワード
・必須項目、最小6文字。
　
（２）AngularJSのnewページを修正
　
１）修正内容
　
・初期状態は背景色無し。すべての入力項目が正常に入力されたらフォーム全体の背景色をライトグリーン。正常の状態で無い場合はライトピンク。
form.ng-invalid.ng-dirty { background-color: lightpink; }
form.ng-valid.ng-dirty { background-color: lightgreen; }
　
・テキストボックスのborder-colorなどをBootstrap3のhas-errorクラスを使って設定。
　
AngularJSのng-classを使ってフォームの入力項目が状態が$invalidかつ$dirtyの場合のみ’has-error’クラスを動的に追加するように設定。
　
<div class=”form-group” ng-class=”{‘has-error’: userNewForm.name.$invalid && userNewForm.name.$dirty}”>
　
・エラーメッセージをBootstrap3のtext-dangerクラスを使って文字色などを設定。
　
AngularJSのng-showを使ってフォームの入力項目の状態が$invalidかつ$errorの場合のみエラーメッセージを表示し、メッセージのCSS設定として’text-danger’クラス設定。
　
<span class=”text-danger” ng-show=”userNewForm.name.$dirty && userNewForm.name.$error.required”>
Name can’t be blank
</span>
　
・フォーム全体のバリデーションチェックがOKになるまでボタンを無効にする。
　
<button type=”submit” class=”btn btn-primary”
ng-disabled=”userNewForm.$invalid” >
Create my account
</button>
　
２）修正したnewページ
　
$ vi app/assets/templates/users/new.html.erb

<div ng-controller="UsersNewCtrl" class="row">
<style>
  form.ng-invalid.ng-dirty { background-color: lightpink; }
  form.ng-valid.ng-dirty { background-color: lightgreen; }
  form { padding: 10px;}
</style>
  <div class="col-md-6 col-md-offset-3">
    <h1 class="text-center">Sign up</h1>
    <form name="userNewForm" novalidate>
      <div class="well">
        <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}">
          <label>Name</label>
          <input name="name" class="form-control"
            ng-model="user.name"
            required
            ng-maxlength="20" />
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required">
            Name can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength">
            Name is too long (maximum is 20 characters)
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}">
          <label>Email</label>
          <input type="email" name="email" class="form-control"
            ng-model="user.email"
            required />
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required">
            Email can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email">
            Email is invalid
          </span>
        </div>
        <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}">
          <label>Password</label>
          <input type="password" name="password" class="form-control"
            ng-model="user.password"
            required
            ng-minlength="6" />
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required">
            Password can't be blank
          </span>
          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength">
            Password is too short (minimum is 6 characters)
          </span>
        </div>
：
        <button ng-click="submit()" class="btn btn-primary"
                ng-disabled="userNewForm.$invalid" >
          Create my account
        </button>
      </div>
    </form>
  </div>
</div>