ngMessages を使用した AngularJS フォーム検証

ほぼすべての Web サイトでは、ユーザーの登録や連絡先情報の取得など、さまざまなタスクを実行するためにフォームを使用しています。フォームに記入するユーザーが少なくとも入力フィールドに有効な情報を入力していることを確認することが重要です。

ユーザーがフォームに正しく入力できるように、詳細なエラー メッセージも表示する必要があります。多数のフォーム要素を処理する必要があり、それぞれに独自のカスタム エラー メッセージが必要になる場合、このプロセスは非常に複雑になる可能性があります。この問題を軽減するために、Angular 1.3 には、開発者がフォームを簡単に検証できるようにする ngMessages という新しいモジュールが追加されています。

ngMessages モジュールを使用すると、重複したコードを記述せずにカスタム エラー メッセージをユーザーに表示できます。このチュートリアルでは、このモジュールを使用してフォームを検証する方法を学習します。また、外部からエラー メッセージをロードし、実際に必要な場合にのみメッセージを表示する方法も学習します。

基本的な例

このモジュールの有用性を理解するために、まず ngMessages の助けを借りて、または使わずに 1 つの入力フィールドを検証してみましょう。 ngMessages を使用しない場合、入力要素のマークアップは次のコードのようになります:

リーリー

次の JavaScript コードも必要です:

リーリー

他のすべてのフォーム要素も同様の検証が必要です。これにより、マークアップが非常に反復的になり、エラーが発生する可能性が高くなります。同じフォーム入力を検証するために ngMessages を使用することにした場合、マークアップは次のコードのようになります:

リーリー

JavaScript コードは次のようになります:

リーリー

ここでは、ng-messages ディレクティブを使用してエラー メッセージをグループ化します。 ng-messages ディレクティブに渡される値は、パターン formName.inputName.$error に従います。この例では、これは formValidation.username.$error と評価されます。

同様に、他のすべてのフィールドの ng-messages ディレクティブの値を取得することもできます。 ngMessages は、ngModel ディレクティブによって公開される $error オブジェクトに依存して、エラー メッセージを Web ページ上に表示するか非表示にするかを決定します。 $error オブジェクトをループして、任意の ng-message ディレクティブの値に一致するキーを探します。

これは、上記の検証コードが実際に動作していることを示す実際の例です:

確認フォーム

このセクションでは、ユーザー名、パスワード、電子メールのフィールドを含むフォームを検証します。フォームのマークアップは次のコードのようになります:

リーリー

ご覧のとおり、さまざまなフォーム要素を検証するために必要なマークアップは非常に似ています。この例の重要な変更は、ng-pattern ディレクティブの追加です。ここで使用するパターンでは、入力されたユーザー名に英数字とアンダースコアのみが含まれることが保証されます。 /^\w $/ の \w は、A ～ Z、a ～ z、0 ～ 9、_ などの単語文字を表します。

「ユーザー名」フィールドに別のユーザー名を入力してみてください。しばらくすると、最初の 6 文字より前または最初の 12 文字より後に文字を入力しても、その文字が英数字ではないというエラーがフォームに表示されないことがわかります。この動作はあまりユーザーフレンドリーではありません。

たとえば、一部のユーザーが感嘆符で始まるユーザー名を持っているとします。英数字のみを使用するというエラーが表示される前に、さらに 6 文字を入力するまで待つ必要があります。ユーザー名を最初から再度入力し始めたら、非常にイライラするでしょう。

デフォルトでは、ngMessages は一度に 1 つのエラーのみをユーザーに表示します。ユーザーが 6 文字を超える文字を入力するまで、無効な文字に関するメッセージが表示されないのはこのためです。さらに、ngMessages は、エラー メッセージの入力順序をヒントとして使用して、エラー メッセージに優先順位を付けます。

英数字エラーが発生する前に最小文字数のメッセージを指定した場合、ngMessages は最小文字数のエラーが解決されるまで待機してから英数字エラーを表示します。

これは同じフォームですが、エラー メッセージの表示順序が異なります。

ng-messages-multiple を使用して、該当するすべてのエラー メッセージをユーザーに一度に表示することもできます。ただし、ユーザーが入力フィールドに入力を開始すると、複数のエラー メッセージが表示され、圧倒されてしまう可能性があります。

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，则为每个输入字段重复它是没有意义的。 ngMessages 模块可以帮助您仅编写一次通用错误消息，并在需要时将它们包含在您的表单中。以下是创建向用户显示通用错误消息的表单的标记。

<script type="text/ng-template" id="generic-messages">
    <p ng-message="required">This field is required.</p>
    <p ng-message="minlength">This field is too short.</p>
    <p ng-message="maxlength">This field is too long.</p>
</script>

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
      <p ng-message="maxlength">Username cannot be longer than 12 characters.</p>
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Password</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="required">This field is required.</p>
      <p ng-message="email">Please enter a valid email address.</p>
    </div>
</form>

就像前面的情况一样，消息的优先级由其在模板中的位置决定。您还可以通过在各个字段中包含自定义错误消息来覆盖模板中提供的通用消息。还可以使用以下代码从单独的文件加载错误消息：

<div ng-messages="formValidation.userPassword.$error">
    <div ng-messages-include="path/to/generic-messages.html"></div>
</div>

仅在需要时显示错误

您可以通过仅在用户在填写表单时实际出错时显示错误消息，使表单更加用户友好。例如，您可以选择仅在用户实际跳过输入元素时显示必填字段错误。

这可以通过使用 ng-show 或 ng-if 指令以及 $touched 和 $dirty。对于 $touched，一旦输入失去焦点，就会显示错误消息。对于 $dirty，一旦输入无效就会显示错误消息。

<div ng-messages="form.username.$error" ng-if="form.username.$touched">

<div ng-messages="form.username.$error" ng-if="form.username.$dirty">

<div ng-messages="form.username.$error" ng-show="form.username.$touched">

<div ng-messages="form.username.$error" ng-show="form.username.$dirty">

这是显示 $touched 和 $dirty 之间区别的演示。

结论

在本教程中，您了解了使用 ngMessages 验证不同类型表单元素的输入是多么容易。您还学习了如何多次重复使用相同的错误消息以避免重复，以及如何确定不同错误消息的优先级。

您还可以同时使用 ngMessages 和 ngAnimate 来使用自定义动画来显示或隐藏错误消息。有关使用 ngAnimate 模块的教程也将很快在 Envato Tuts+ 上发布。

如果您想与其他读者分享任何提示，或者有任何问题想问，请在评论中告诉我。

以上がngMessages を使用した AngularJS フォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。