最新のWeb開発のチュートリアル
 

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

❮前 次の章❯

AngularJSは、入力されたデータを検証することができます。

フォームバリデーション

AngularJSは、クライアント側のフォーム検証を提供しています。

AngularJSは、フォームや入力フィールド（入力、テキストエリア、選択）の状態を監視し、あなたは現在の状態についてユーザーに通知することができます。

AngularJSはまた、タッチ、または変性されたか否かについての情報を保持しています。

あなたは、標準のHTML5は、入力を検証するために属性を使用することもできますし、独自の検証関数を作ることができます。

注意 クライアント側の検証だけではないことができ、安全なユーザー入力。 サーバー側の検証も必要です。

必須

HTML5属性を使用しrequired入力フィールドが記入されなければならないことを指定するに：

例

入力フィールドが必要です。

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
»それを自分で試してみてください

Eメール

HTML5の型を使用しemail値は、電子メールでなければならないことを指定するには：

例

入力フィールドは、電子メールである必要があります：

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
»それを自分で試してみてください

フォームの状態や入力状態

AngularJSは常にフォームや入力フィールドの両方の状態を更新しています。

入力フィールドは、次の状態があります。

  • $untouchedフィールドはまだ触れられていません
  • $touchedフィールドがタッチされました
  • $pristine分野はまだ修正されていません
  • $dirtyフィールドが変更されました
  • $invalidフィールドの内容が有効ではありません
  • $validフィールドの内容が有効です

彼らはすべての入力フィールドのプロパティである、とされているか、 trueまたはfalse 。

フォームは、次の状態があります。

  • $pristineなしのフィールドはまだ修正されていません
  • $dirty一つ以上の修飾されています
  • $invalidフォームの内容が有効ではありません
  • $validフォームの内容が有効です
  • $submittedフォームが送信されます

彼らはすべてのフォームのプロパティである、とされているか、 trueまたはfalse 。

あなたはユーザーにとって意味のメッセージを表示するためにこれらの状態を使用することができます。 たとえば、フィールドが必要な場合は、ユーザーが空白のままに、あなたは、ユーザーに警告を与える必要があります：

例

フィールドが触れて空でされている場合は、エラーメッセージを表示します：

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</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一つ以上のフィールドが変更されました
  • 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>
»それを自分で試してみてください

例の説明しました：

HTMLでは、新しいディレクティブは、属性使用して参照されるmy-directive 。

JavaScriptのではという新しいディレクティブ追加することによって開始myDirective 。

ディレクティブに名前を付けるとき、あなたはキャメルケースの名前、使用する必要があり、覚えておいてくださいmyDirective 、それを呼び出すときに、あなたが使用する必要があります-区切られた名前、 my-directive 。

そして、あなたは私たちが必要とすることを指定したオブジェクトを返すngModel ngModelControllerです。

四番目の引数、いくつかの引数を取り連携機能、メイクmCtrl 、あるngModelController 、

そして、名前のこのケースでは、関数を指定myValidation 1引数を取り、この引数は、入力要素の値です。

テスト値は、文字"e"を含み、いずれかにモデル制御器の有効性を設定した場合trueまたはfalse 。

最後に、 mCtrl.$parsers.push(myValidation);追加されますmyValidationたびに入力値の変更が実行される他の機能の配列に機能します。

検証例

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<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">Username is required.</span>
  </span>
</p>

<p>Email:<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">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</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 = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
»それを自分で試してみてください
注意 HTMLフォーム属性NOVALIDATEはデフォルトのブラウザの検証を無効にするために使用されます。

例の説明しました

AngularJSディレクティブngのモデルは、モデルへの入力要素をバインドします。

ユーザーと電子メール ：モデル・オブジェクトは、2つのプロパティがあります。

そのためNG-ショーで、色付きのスパン：赤は、ユーザーまたは電子メールは$汚いと$無効である場合にのみ表示されます。


❮前 次の章❯