Angular JS でのフォームでのユーザー入力の検証

Angular JS でのフォームでのユーザー入力の検証

私はよく、エントリーレベルの開発者がAngularJSシングルページアプリケーションでのユーザー入力の検証に苦労しているのを見てきました。この投稿では、AngularJSでの検証について、すばやく役立つ紹介をします。この投稿は、さらに学習するための基本的な学習ドキュメントと考えてください。

8min read

エントリーレベルの開発者が、AngularJS シングルページ アプリケーションでのユーザー入力の検証に苦労しているのをよく見かけます。この投稿では、AngularJSでの検証について簡単に紹介します。この投稿は、さらに学習できる基本的な学習ドキュメントとして考えてください。

下の画像に示す例から始めましょう。登録フォームには、次の制限のある 3 つのフィールドがあります。

  1. 名前: 必須
  2. 電子メール: 必須で、「電子メール」と入力します
  3. パスワード: 必須、パスワードと最小長 6 を入力します
3 つのフィールドを含む登録フォームがあります

上記のルールをクライアント側で検証したいと考えています。AngularJS ベースのシングルページアプリケーションでクライアント側の検証を行うには、次の 2 つの方法があります。

  • HTML5 検証の使用
  • Using the AngularJS validation directives
  • 両方の組み合わせ

HTML5 Validation

ここでは、以下のマークアップを使用して、上記の [ユーザーの追加] フォームを作成しました。

  <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

HTML 5 検証を使用して、必要なすべてのユーザー検証を適用しています。 無効なユーザーデータを含むフォームを送信すると、HTML5は以下に示すようなエラーを返します。

無効なユーザーデータを含むフォームを送信すると、HTML5は次のようにエラーを返します

UI のこのエラーは HTML5 によって返されます。HTML5 の検証は、HTML5 をサポートしていないブラウザでは機能しません。検証手法に関するいくつかのポイントは次のとおりです。

  • 検証はブラウザでは機能しませんHTML5をサポートしていません
  • 無効なユーザー入力に対して HTML 5 エラー (上の画像を参照) が表示されます
  • 無効なユーザー入力は、コントローラーで未定義の値に設定されます

次に、コントローラーのユーザー入力の値を読み取ってみましょう。フォームにコントローラーを取り付けることを忘れないでください。

console.log('user name : ' + $scope.userfullName);
console.log('user email : ' +$scope.useremail);
console.log('user password :' +$scope.userpassword);

ここでは、HTML 5 検証を使用してフォームとユーザー入力を検証しています。入力内容の一部が無効な場合でも、フォームを送信できます。無効な入力値は、コントローラで未定義に設定されます。次の図に示すように、電子メール フィールドの入力は無効であり、コントローラーでは無効な電子メール値が未定義に設定されています。

入力内容の一部が無効な場合でも、フォームを送信できます。

上記の検証手法から、次の 2 つの重要な観察結果が得られます。

  1. フォームが有効でなくてもフォームを提出することができました
  2. 無効な入力の場合、値はコントローラで未定義に設定されていました

フォームが無効なときにフォームを送信しないようにするには、ボタンをngクリックする代わりに、フォーム自体にng-submitディレクティブを使用します。

 <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

ng-submitでは、パラメータformname.$validを使用してコントローラから関数AddUserを呼び出します。この送信関数は、フォームが有効な場合、つまり、フォームのすべてのユーザー入力が有効な場合にのみ呼び出されます。この場合、フォームが有効でない場合、fromは送信されないことに注意してください。前の例では、フォームが無効であってもフォームを送信でき、無効な入力フィールドの場合は未定義の値がコントローラーに渡されていることがわかりました。ただし、ここではフォームが有効でない場合は送信できません。

AngularJS Validation

別のオプションは、AngularJS ディレクティブのみを使用してユーザー入力を検証することです。AngularJS 検証のみを使用するには、次のタスクを実行する必要があります。

  1. フォームで novalidate を使用して、HTML 検証を無効にします。
  2. Instead of HTML validations use AngularJS validation directives.

以下のリストに示すように、AngularJS 検証ディレクティブのみを使用して、必要なユーザー検証を含むフォームを作成できます。

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

novalidate 属性を使用して HTML5 検証を無効にし、次のユーザー入力を検証しています。

  1. すべてのフィールドは必須です。
  2. パスワードフィールドの最小長は 6 です。

フォームを送信すると、ユーザー入力は AngularJS 検証ディレクティブを使用して検証されます。ユーザーが名前の値を指定しない場合、またはパスワード フィールドに 6 文字未満の値を指定した場合、フォームは無効なユーザー入力に対して undefined の値で送信されます。

フォームを送信すると、ユーザー入力は AngularJS 検証ディレクティブを使用して検証されます。

お気づきかもしれませんが、HTML 5 検証を使用せず、AngularJS 検証に依存すると、次の 2 つのことが起こります。

  1. すべてのユーザー入力が有効でなくてもフォームが送信されます
  2. 無効なユーザー入力に対するエラー・メッセージは表示されません

フォームが無効な場合に送信ボタンを無効にする

フォームが無効であるか、ユーザー入力のいずれかが無効な場合は、送信ボタンを無効にすることができます。AngularJS $validプロパティを使用して、フォームが無効な場合に送信ボタンを無効にしましょう。

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-disabled="!adduser.$valid" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

ここでは、ng-disabledディレクティブを使用してボタンを無効にしています。下の画像に示すように、$valid プロパティを使用して、フォームが有効かどうかをチェックします。adduserがフォームの名前であることを忘れないでください。

エラーメッセージを表示する

HTML5 検証ルールとは異なり、デフォルトでは、AngularJS 検証ディレクティブは無効なユーザー入力のエラー メッセージを表示しません。ただし、以下のリストに示すようにエラー メッセージを表示することができます。エラー メッセージを表示するために、$valid プロパティと $pristine プロパティを使用しています。

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

エラーメッセージは、次の図に示すように表示されます。

エラーメッセージは次のように表示されます

エラーメッセージと入力コントロールのスタイル設定

$valid プロパティと $pristine プロパティを使用して、エラー メッセージを表示し、次のリストを使用してそのスタイルを作成できます。

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg" ng-class="{ 'has-error' : adduser.name.$invalid && !adduser.name.$pristine }">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

これで、エラーメッセージが下の画像に示すスタイルで表示されます。

これで、エラーメッセージが図のようなスタイルで表示されます

コントローラでの検証プロパティの読み取り

コントローラーでは、フォーム名の $valid プロパティを使用して、フォームが有効かどうかを読み取ることができます。すべてのユーザー入力が有効な場合、プロパティ true $valid値が得られます。フォームが有効かどうかは、以下のリストに示すようにコントローラで確認できます。

if ($scope.adduser.$valid) {
   alert('all inputs are valid ');
}
else {
   alert('all inputs are not valid ');
}

AngularJS Validation Properties

AngularJS 検証の操作中、次の重要なプロパティがあります。

AngularJS 検証の操作中、次の重要なプロパティがあります

これらのプロパティをフォーム名とともに使用して、さまざまな検証タスクを実行できます。

それで、これで完了です!HTML5 検証と AngularJS 検証ディレクティブを組み合わせて使用して、AngularJS のフォームとユーザー入力を検証する方法を検討しました。この投稿がお役に立てば幸いです – 読んでくれてありがとう!

Angular How To
デモを予約