AngularJSフォームバリデーション

AngularJSは入力データをバリデーションすることができます。

フォームバリデーション

AngularJSはクライアント側のフォームバリデーションを提供します。

AngularJSは、フォームと入力フィールド（input、textarea、select）の状態を監視し、ユーザーに現在の状態を通知することができます。

AngularJSは、それがタッチされたか、変更されたかどうかに関する情報も含んでいます。

標準のHTML5属性を使用して入力をバリデーションを行うことができますし、独自のバリデーション関数を作成することもできます。

クライアント側のバリデーションはユーザーの入力を単独で保護することはできません。サーバー側のバリデーションも必要です。

required

HTML5の属性を使用 required 指定されたフィールドは必須です：

インスタンス

この入力フィールドは必須です：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>入力の有効状態は：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

実際に試してみてください

email

HTML5のタイプを使用 email 指定された値はメールアドレスでなければなりません：

インスタンス

この入力フィールドはメールアドレスでなければなりません：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>入力の有効状態は：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

実際に試してみてください

フォーム状態および入力状態

AngularJS は常にフォームおよび入力フィールドの状態を更新します。

入力フィールドには以下の状態があります：

  • $untouched このフィールドはタッチされていません
  • $touched このフィールドはタッチされています
  • $pristine このフィールドは変更されていません
  • $dirty このフィールドは変更されています
  • $invalid フィールドの内容が無効
  • $valid フィールドの内容が有効

これらはすべて入力フィールドの属性であり、真または偽の値を取ります。

フォームには以下の状態があります：

  • $pristine まだ何も変更されていません
  • $dirty 1つまたは複数のフィールドが変更されています
  • $invalid フォーム内容が無効
  • $valid フォーム内容が有効
  • $subscribed フォームが提出されました

これらはすべてフォームの属性であり、真または偽の値を取ります。

これらの状態を使用してユーザーに意味のあるメッセージを表示できます。例えば、必須項目のフィールドがユーザーにより空けられていた場合、ユーザーに警告を発することができます：

インスタンス

フィールドがタッチされており、空の場合にエラーメッセージを表示します：

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名前は必須です。</span>

実際に試してみてください

CSS クラス

AngularJS はフォームおよび入力フィールドの状態に応じて CSS クラスを追加します。

以下のクラスが入力フィールドに追加されましたまたは入力フィールドから削除されました：

  • ng-untouched このフィールドはタッチされていません
  • ng-touched このフィールドはタッチされています
  • ng-pristine このフィールドは変更されていません
  • ng-dirty このフィールドは変更されています
  • ng-valid フィールドの内容が有効
  • ng-invalid フィールドの内容が無効
  • ng-valid-key 各キーを一度ずつ検証します。例えば：ng-valid-required、複数の必須検証の内容がある場合に非常に役立ちます
  • ng-invalid-key 例えば：ng-invalid-required

以下のクラスがフォームに追加されましたまたはフォームから削除されました：

  • ng-pristine 変更されていないフィールドはありません
  • ng-dirty 1つまたは複数のフィールドが変更されています
  • ng-valid フォーム内容が有効
  • ng-invalid フォーム内容が無効
  • ng-valid-key 各キーを一度ずつ検証します。例えば：ng-valid-required、複数の必須検証の内容がある場合に非常に役立ちます
  • ng-invalid-key 例えば：ng-invalid-required

クラスが表す値が false、それらのクラスは削除されます。

これらのクラスにスタイルを追加し、より良い、より直感的なユーザーインターフェースをアプリケーションに提供してください。

インスタンス

標準の CSS を使用してスタイルを適用します：

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

実際に試してみてください

フォームのスタイルも設定できます。

インスタンス

未修正の（元の）フォームおよび修正されたフォームにスタイルを適用します：

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

実際に試してみてください

カスタムバリデーション

独自のバリデーション関数を作成するには、いくつかのスキルが必要です；アプリケーションに新しい指令を追加し、指定されたパラメータを処理する関数を使用して内部のバリデーションを行います。

インスタンス

独自の指令を作成し、カスタムバリデーション関数を含め、 my-directive それを参照します。

値がアルファベット「e」を含む場合のみ、このフィールドが有効です：

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        return value;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

実際に試してみてください

Example Explained:

HTMLでは、新しい指令は属性 my-directive を参照します。

JavaScriptでは、まず以下の名前を参照するために追加します。 myDirective の新しい指令です。

覚えておいてください、指令を名前付ける際にはキャメルケース形式を使用する必要があります、例えば myDirectiveを使用しますが、呼び出す際にはハイフンで区切られた名前を使用する必要があります、例えば my-directive。

次に、指定する必要があるオブジェクトを返します。 ngModel、すなわち ngModelController。

リンク関数を作成します。この関数はいくつかの引数を受け取り、その中で第4引数 mCtrl は ngModelController。

次に、関数を指定します。この例では、 myValidationこれは、入力要素の値を引数として受け取ります。

この値がアルファベット「e」を含んでいるかテストし、モデルコントローラーの有効性を設定します。 true または、 false。

最後に、mCtrl.$parsers.push(myValidation); を}} myValidation 関数が他の関数の配列に追加され、これらの関数は値が変更されるたびに実行されます。

バリデーション例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>バリデーション例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>ユーザー名：<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">ユーザー名は必須です。</span>
  </span>
</p>
<p>メール：<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">メールは必須です。</span>
  <span ng-show="myForm.email.$error.email">無効なメールアドレス。</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {}}
  $scope.user = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

実際に試してみてください

HTML フォーム属性 novalidate デフォルトのブラウザバリデーションを無効にするために使用されます。

例解：

AngularJS インストラクション ng-model 入力要素をモデルにバインドします。

モデルオブジェクトには2つの属性があります：user および email。

のために ng-show、ユーザーまたはメールが $dirty および $invalid color:redを持つspanが表示されます。