Validation du formulaire AngularJS à l'aide de ngMessages

Presque tous les sites Web utilisent des formulaires pour effectuer différentes tâches, telles que l'enregistrement des utilisateurs ou l'obtention de leurs coordonnées. Il est important de s'assurer que l'utilisateur qui remplit le formulaire saisit au moins des informations valides dans les champs de saisie.

Un message d'erreur détaillé doit également être affiché à l'utilisateur afin qu'il puisse remplir correctement le formulaire. Ce processus peut devenir très compliqué lorsque vous devez gérer un grand nombre d'éléments de formulaire, chacun nécessitant son propre message d'erreur personnalisé. Pour soulager la douleur, Angular 1.3 ajoute un nouveau module appelé ngMessages pour aider les développeurs à valider facilement les formulaires.

Le module

ngMessages vous permet d'afficher des messages d'erreur personnalisés aux utilisateurs sans écrire de code en double. Dans ce tutoriel, vous apprendrez à utiliser ce module pour valider vos formulaires. Vous apprendrez également à charger des messages d'erreur en externe et à afficher les messages uniquement lorsque cela est réellement nécessaire.

Un exemple basique

Validons d'abord un seul champ de saisie avec ou sans l'aide de ngMessages pour comprendre l'utilité de ce module. Sans utiliser ngMessages, le balisage de l'élément input ressemblerait au code suivant :

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputname" ng-minlength="6" ng-maxlength="12" required>
    <p ng-show="formValidation.username.$error.minlength">Username should have at least 6 characters.</p>
    <p ng-show="formValidation.username.$error.maxlength">Username should have at most 12 characters.</p>
    <p ng-show="formValidation.username.$error.required">Providing a username is mandatory.</p>

</form>

Vous aurez également besoin du code JavaScript suivant :

angular.module('app', []);

Tous les autres éléments du formulaire nécessitent une validation similaire. Cela rendra le balisage très répétitif, augmentant ainsi le risque d'erreurs. Si vous décidez d'utiliser ngMessages pour valider la même saisie de formulaire, le balisage ressemblera au code suivant :

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputname" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
    </div>

</form>

Le code JavaScript deviendra désormais :

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

Ici, on utilise ng-messages 指令将错误消息分组在一起。传递给 ng-messages 指令的值遵循以下模式 formName.inputName.$error。在我们的例子中，其计算结果为 formValidation.username.$error.

De même, vous pouvez également obtenir les clés dont les valeurs correspondent à la directive ng-messages 指令的值。 ngMessages 依赖 ngModel 指令公开的 $error 对象来确定是否应在网页上显示或隐藏错误消息。它循环遍历 $error 对象，查找与任何 ng-message pour tous les autres champs.

Voici un exemple fonctionnel montrant le code de validation ci-dessus en action :

Formulaire de vérification

Dans cette section, nous validerons un formulaire contenant les champs nom d'utilisateur, mot de passe et email. Le balisage du formulaire ressemblera au code suivant :

<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="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
    </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">
      <p ng-message="minlength">Password should have at least 6 characters.</p>
      <p ng-message="maxlength">Password should have at most 12 characters.</p>
      <p ng-message="required">Providing a password is mandatory.</p>
    </div>
    
    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="email">Please enter a valid email address.</p>
      <p ng-message="required">Providing an email is mandatory.</p>
    </div>
</form>

Comme vous pouvez le constater, le balisage requis pour valider les différents éléments du formulaire est très similaire. Un changement important dans cet exemple est l'ajout de ng-pattern 指令。我们在这里使用的模式确保输入的用户名仅包含字母数字字符和下划线。 w 位于 /^w+$/ pour représenter les caractères des mots tels que A-Z, a-z, 0-9 et _.

Vous devriez essayer de saisir un nom d'utilisateur différent dans le champ du nom d'utilisateur. Au bout d'un moment, vous remarquerez que si vous tapez un caractère avant les 6 premiers caractères ou après les 12 premiers caractères, le formulaire ne se plaint pas que le caractère n'est pas alphanumérique. Ce comportement n'est pas très convivial.

Par exemple, disons que certains de vos utilisateurs ont des noms d'utilisateur commençant par un point d'exclamation. Ils doivent attendre d'avoir saisi six caractères supplémentaires avant d'obtenir une erreur concernant l'utilisation uniquement de caractères alphanumériques. Ce serait très frustrant s’ils recommençaient à saisir leur nom d’utilisateur à partir de zéro.

Par défaut, ngMessages n'affiche qu'une seule erreur à l'utilisateur à la fois. C'est pourquoi le message concernant les caractères invalides ne peut être affiché que lorsque l'utilisateur saisit plus de six caractères. De plus, ngMessages utilise l'ordre dans lequel vous saisissez les messages d'erreur comme indice pour les hiérarchiser.

Si vous fournissez un message de caractères minimum avant qu'une erreur alphanumérique ne se produise, ngMessages attendra que l'erreur de caractères minimum soit résolue avant d'afficher l'erreur alphanumérique.

Il s'agit du même formulaire mais les messages d'erreur sont affichés dans un ordre différent.

Vous pouvez également utiliser ng-messages-multiple pour afficher simultanément tous les messages d'erreur applicables à l'utilisateur. Cependant, une fois que les utilisateurs commencent à taper dans le champ de saisie, ils voient plusieurs messages d'erreur, ce qui peut être accablant.

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，则为每个输入字段重复它是没有意义的。 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+ 上发布。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!