Maison > Article > interface Web > À propos de l’analyse des formulaires AngularJs

À propos de l’analyse des formulaires AngularJs

不言original: 2018-06-25 11:39:132380parcourir

Cet article présente principalement les formulaires AngularJs. Ici, nous avons compilé des informations pertinentes et des exemples de codes simples. Les amis dans le besoin peuvent s'y référer

Les contrôles (saisie, sélection, zone de texte) sont un moyen pour les utilisateurs de saisir des données. . Un formulaire est une collection de ces contrôles conçus pour regrouper les contrôles associés.

Les formulaires et les contrôles fournissent des services de validation, afin que les utilisateurs puissent recevoir des invites en cas de saisie non valide. Cela offre une meilleure expérience utilisateur car les utilisateurs peuvent obtenir un retour immédiat et savoir comment corriger les erreurs. Gardez à l’esprit que même si la validation côté client joue un rôle important pour offrir une bonne expérience utilisateur, elle peut être facilement contournée et, par conséquent, on ne peut pas lui faire confiance. L'authentification côté serveur est toujours nécessaire pour une application sécurisée.

1. Formulaire simple

La directive clé pour comprendre la liaison de données bidirectionnelle est ngModel. ngModel fournit une liaison de données bidirectionnelle du modèle à la vue et de la vue au modèle. De plus, il fournit également des API à d'autres directives pour améliorer leur comportement.

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="SimpleForm">
<head>
  <meta charset="UTF-8">
  <title>PropertyEvaluation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate>
    名字: <input ng-model="user.name" type="text"><br/>
    Email: <input ng-model="user.email" type="email"><br/>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">还原上次保存</button>
    <button ng-click="update(user)">保存</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

2. Utiliser les classes CSS

Afin de créer des formulaires et contrôles, ngModel est riche en styles et peut ajouter les classes suivantes :

ng-valid
ng-invalid
ng-pristine (jamais entré)
ng-dirty (entré)

Exemple ci-dessous, en utilisant CSS Pour afficher la validité de chaque contrôle de formulaire. Dans l'exemple, user.name et user.email sont tous deux obligatoires, mais lorsqu'ils sont modifiés (sales), l'arrière-plan apparaîtra en rouge. Cela garantit que l'utilisateur n'est pas distrait par une erreur avant d'avoir interagi avec le formulaire (après la soumission ?) et découvert que sa validité n'était pas respectée.

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CSSClasses">
<head>
  <meta charset="UTF-8">
  <title>CSSClasses</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    名字: <input ng-model="user.name" type="text" required><br/>
    Email: <input ng-model="user.email" type="email" required><br/>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

3. Liaison au formulaire et à l'état de contrôle

En angulaire, le formulaire est Une instance de FormController. L'instance de formulaire peut être exposée à la portée à volonté en utilisant l'attribut name (je ne comprends pas ici, il n'y a pas de propriété dans la portée qui soit la même que l'attribut name du formulaire, mais à cause de "document.form nom", il peut toujours être obtenu). De même, les contrôles sont des instances de NgModelController. Les instances de contrôle peuvent de la même manière être exposées à des formulaires à l'aide de l'attribut name. Cela montre que les propriétés internes du formulaire et du contrôle (contrôle) peuvent être liées dans la vue à l'aide de primitives de liaison standard.

Cela nous permet d'étendre l'exemple ci-dessus avec les fonctionnalités suivantes :

Le bouton RESET n'est disponible qu'après modification du formulaire.
Le bouton ENREGISTRER n'est disponible que lorsque le formulaire change et que la saisie est valide.
Personnalisez les messages d'erreur pour user.email et user.agree.

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="ControlState">
<head>
  <meta charset="UTF-8">
  <title>ControlState</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    名字: <input ng-model="user.name" name="userName" type="text" required><br/>
    <p ng-show="formName.userName.$dirty&&formName.userName.$invalid">
      <span>请填写名字</span>
    </p>
    Email: <input ng-model="user.email" name="userEmail" type="email" required><br/>
    <p ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示:
      <span ng-show="formName.userEmail.$error.required">请填写Email</span>
      <span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span>
    </p>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意：
    <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/>
    <br/>
    <p ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</p>
    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
    <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

4. Validation personnalisée

Angulaire est majoritaire. Les types de champs de formulaire HTML publics (saisie, texte, numéro, URL, e-mail, radio, case à cocher) fournissent des implémentations, et il existe également des directives pour la validation du formulaire (obligatoire, modèle, inlength, maxlength, min, max).

Nous pouvons définir notre propre plug-in de validation en définissant une directive qui ajoute une fonction de validation personnalisée au contrôleur ngModel (est-ce un ngModelController connecté ?). Pour obtenir un contrôleur, la directive spécifie les dépendances comme indiqué dans l'exemple suivant (attribut require dans l'objet de définition de la directive).

Mise à jour du modèle à afficher - Chaque fois que le modèle change, toutes les fonctions du tableau ngModelController.$formatters (la validation des données et la conversion du format sont déclenchées lorsque le modèle change) seront mises en file d'attente pour l'exécution, donc dans chaque fonction ici a la possibilité de formater la valeur du modèle et de passer NgModelController.$setValidity (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity ) pour modifier le statut de validation du contrôle.

Mise à jour de la vue vers le modèle - Une approche similaire, chaque fois que l'utilisateur interagit avec un contrôle, NgModelController.$setViewValue sera déclenché. À ce stade, c'est au tour d'exécuter NgModelController$parsers (une fois que le contrôle a obtenu la valeur du DOM, il exécutera toutes les méthodes de ce tableau, examinera, filtrera ou convertira la valeur, et effectuera également une vérification) toutes les méthodes du tableau.

Dans l'exemple suivant, nous allons créer deux directives.

Le premier est un entier, qui est chargé de vérifier si l'entrée est un entier valide. Par exemple, 1,23 est une valeur illégale car elle contient une partie décimale. Notez que nous insérons (unshift) en tête du tableau au lieu d'insérer (push) à la queue. C'est parce que nous voulons qu'il s'exécute en premier et utilise la valeur de ce contrôle (on estime que ce tableau est utilisé comme un). file d'attente). Nous devons La fonction de validation est exécutée avant que la conversion n'ait lieu.

第二个directive是smart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意，我们在这不可以使用HTML5的input类型”number”，因为浏览器不允许用户输入我们预期的非法字符，如”1,2”（它只认识”1.2”）。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomValidation">
<head>
  <meta charset="UTF-8">
  <title>CustomValidation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    <p>
      大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}<br/>
      <span ng-show="formName.size.$error.integer">这不是一个有效的整数</span>
      <span ng-show="formName.size.$error.min || formName.size.$error.max">
        数值必须在0到10之间
      </span>
    </p>
    <p>
      长度（浮点数）：
      <input type="text" ng-model="length" name="length" smart-float/>
      {{length}}<br/>
      <span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span>
    </p>
  </form>
</p>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("CustomValidation", []);
  var INTEGER_REGEXP = /^\-?\d*$/;
  app.directive("integer", function () {
    return {
      require:"ngModel",//NgModelController
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function (viewValue) {//$parsers，View到Model的更新
          if(INTEGER_REGEXP.test(viewValue)) {
            //合格放心肉
            ctrl.$setValidity("integer", true);
            return viewValue;
          }else {
            //私宰肉……
            ctrl.$setValidity("integer", false);
            return undefined;
          }
        });
      }
    };
  });
  var FLOAT_REGEXP = /^\-?\d+(?:[.,]\d+)?$/;
  app.directive("smartFloat", function () {
    return {
      require:"ngModel",
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          if(FLOAT_REGEXP.test(viewValue)) {
            ctrl.$setValidity("float", true);
            return parseFloat(viewValue.replace(",", "."));
          }else {
            ctrl.$setValidity("float", false);
            return undefined;
          }
        });
      }
    }
  });
</script>
</body>
</html>

五、Implementing custom form control (using ngModel)

　　angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。

　　为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：

实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。

调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。
　　可以查看$compileProvider.directive获取更多信息。

　　下面的例子展示如何添加双向数据绑定特性到可以编辑的元素中。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomControl">
<head>
  <meta charset="UTF-8">
  <title>CustomControl</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    p[contenteditable] {
      cursor: pointer;
      background-color: #D0D0D0;
    }
  </style>
</head>
<body ng-controller="MyCtrl">
<p class="ng-cloak">
  <p contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</p>
  <pre class="brush:php;toolbar:false">model = {{content}}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Articles Liés

Voir plus