AngularJS
フォーム検証

基本フォーム検証

Angularの強みの1つは、クライアント側のフォーム検証です。

伝統的なフォーム入力を扱い、疑問のあるjQueryスタイルの処理を使用する必要がありますが、時間がかかり、細かいことがあります。 Angularでは、プロのインタラクティブフォームを比較的簡単に作成できます。

ng-modelディレクティブは入力フィールドとの双方向バインディングを提供し、通常はnovalidate属性もフォーム要素に配置され、ブラウザがネイティブ検証を行わないようにします。

したがって、単純なフォームは次のようになります。

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Angularが入力を検証するには、 ng-model属性を追加してスコープでバインドする変数を指定する以外は、通常の入力要素とまったく同じ構文を使用します。前の例では電子メールが表示されています。数値を検証するには、構文は次のようになります。

<input type="number" name="postalcode" ng-model="zipcode" />

基本的なフォームの検証の最終ステップは、デフォルトのフォームの送信を可能にするのではなく、 ng-submitを使用してコントローラのフォーム送信機能に接続することです。これは必須ではありませんが、入力変数がスコープですでに使用可能であり、サブミット関数で使用できるため、通常は使用されます。フォームに名前を付けることは、通常は良い習慣です。これらの変更により、次の構文が生成されます。

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

このコードは機能的ですが、Angularが提供する他の機能もあります。

次のステップでは、Angularが、 ng- pristine 、 ng-dirty 、 ng-validおよびng-invalidを使用してフォーム処理にクラス属性を付加することを理解することです 。あなたのCSSでこれらのクラスを使用すると、 有効/無効および初期/汚れた入力フィールドをスタイルすることができ、ユーザーがフォームにデータを入力するときにプレゼンテーションを変更できます。

フォームと入力状態

角度のあるフォームと入力には、コンテンツの検証時に役立つさまざまな状態があります

入力状態

上記の状態はすべてブール値のプロパティであり、trueまたはfalseのいずれかになります。

これにより、ユーザーにメッセージを表示することは非常に簡単です。

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

ここでは、 ng-showディレクティブを使用して、フォームを変更したが無効な場合にユーザーにメッセージを表示します。

CSSクラス

Angularは、フォームと入力の状態に応じていくつかのCSSクラスを提供します

これらのクラスを使用して、フォームにスタイルを追加することができます

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessagesは、ビューに検証メッセージを表示するためのスタイルを強化するために使用されます。

従来のアプローチ

ngMessages前に、私たちは通常Angularの事前定義されたディレクティブng-classを使ってバリデーションメッセージを表示します。このアプローチはゴミとrepetitive作業でした。

さて、 ngMessagesを使用することで独自のカスタムメッセージを作成できます。

例

Html：

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS：

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

カスタムフォーム検証

場合によっては、基本的な検証では不十分です。角度サポートのカスタム検証は、バリデータ関数をngModelController $validatorsオブジェクトにngModelControllerます：

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

バリデーターは、 ngModelを必要とするディレクティブとして定義されています。バリデーターを適用するには、カスタム・ディレクティブを入力フォーム・コントロールに追加するだけです。

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

またmy-validatorはネイティブフォームコントロールに適用する必要はありません。その属性のng-modelであれば、どの要素でもかまいません。これは、カスタムビルドUIコンポーネントがある場合に便利です。

ネストされたフォーム

コントロールと入力をページ上に論理的にグループ化する目的でフォームをネストすることが望ましいことがあります。ただし、HTML5フォームはネストしないでください。代わりにAngular Supplyをng-formにします。

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

フォームの各部分は、フォーム全体の状態に寄与します。したがって、入力myInput1 1つが編集されて$dirty場合、それを含むフォームも$dirtyます。これはフォームを含む各フォームにカスケードするので、 myNestedFormとmyForm両方が$dirtyます。

非同期バリデーター

非同期バリデーターを使用すると、バックエンドに対してフォーム情報を検証できます（$ httpを使用）。

この種のバリデーターは、ユーザー表やその他のデータベース情報など、さまざまな理由でクライアントにはないサーバー格納情報にアクセスする必要がある場合に必要です。

非同期バリデータを使用するには、 input ng-modelにアクセスし、 $asyncValidatorsプロパティのコールバック関数を定義します。

例：

次の例では、指定された名前がすでに存在するかどうかを確認します。名前がすでに存在する場合、または提供されていない場合、バックエンドは約束を拒否するステータスを返します。名前が存在しない場合、解決された約束が返されます。

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

入力のng-modelが変更されるたびに、この関数が実行され、結果とともに約束が返されます。