Les contrôles (entrée, sélection, textarea) sont un moyen pour les utilisateurs de saisir des données. La forme est une collection de ces contrôles, dans le but de regrouper les contrôles connexes.
Les formulaires et les contrôles fournissent des services de vérification, afin que les utilisateurs puissent recevoir des invites pour une entrée non valide. Cela offre une meilleure expérience utilisateur car les utilisateurs peuvent obtenir des commentaires immédiatement et savoir comment corriger l'erreur. N'oubliez pas que bien que la vérification du client joue un rôle important dans la fourniture d'une bonne expérience utilisateur, il peut être simplement contourné, donc la vérification du client n'est pas fiable. La vérification côté serveur est toujours nécessaire pour une application sécurisée.
1. Formulaire simple
La directive clé pour comprendre la liaison des données bidirectionnelle est NGModel. NGMODEL fournit la liaison de données bidirectionnelles du modèle à la vue et à la visualisation au modèle. Et, il fournit également des API à d'autres directives pour améliorer leur comportement.
<! Doctype html> <html lang = "zh-cn" ng-app = "Simpleform"> <éadf> <meta charset = "utf-8"> <tight> PropertyEvaluation </ title> <style type = "text / css"> .ng-col-kak {display: non; } </ style> </ head> <body> <div ng-controller = "myctrl"> <form novalidate> name: <entrée ng-model = "user.name" type = "text"> <br/> e-mail: <entrée ng-model = "user.email" type = "e-mail"> <bder/> Gender: <entrée valeur = "mâle" ng-model = "user.Gender" type = "radio"> mâle <input value = "feme" ng-model = "user.gender" type = "radio"> femelle <br/> <bouton ng-click = "reset ()"> restaurer le dernier </ bouton> <bouton ng-click = "user | JSON}} </ Pre> <Pre> Saved = {{Saved | JSON}} </ pre> </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> var app = angular.module ("simpleform", []); app.Controller ("myctrl", fonction ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.saved); // Les valeurs illégales n'entreront pas sur l'utilisateur}); </cript> </ body> </html>2. Utilisation de cours CSS
Afin de créer des formulaires, des commandes et des ngmodel riches en style, la classe suivante peut être ajoutée:
Dans l'exemple suivant, utilisez CSS pour afficher la validité de chaque contrôle de forme. Dans l'exemple, user.name et user.email sont requis, mais lorsqu'ils sont modifiés (sales), l'arrière-plan apparaîtra rouge. Cela garantit que l'utilisateur n'est distrait par une erreur qu'après avoir interagi avec le formulaire (après soumission?) Et découvrir que sa validité n'est pas remplie.
<! Doctype html> <html lang = "zh-cn" ng-app = "cssclasses"> <éread> <meta charset = "utf-8"> <tight> cssclasses </ title> <style type = "text / css"> .ng-coak {display: nulaire; } .css-form input.ng-invalid.ng-diirty {background-Color: # fa787e; } .css-form input.ng-valid.ng-diirty {background-Color: # 78FA89; } </ style> </ head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formname"> name: <entrée ng-model = "user.name" type = "text" requis> <br/> e-mail: <entrée ng-model = "user.email" type = "e-mail" requis> ng-model = "user.gender" type = "radio"> mâle <input value = "feme" ng-model = "user.gender" type = "radio"> femelle <br/> <button ng-click = "reset ()"> réinitialiser </button> <button ng-Click = "user)"> Save </ Button> </ form> <pre> formulaire = {user | JSON}} </ Pre> <Pre> Saved = {{Saved | JSON}} </ pre> </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> var app = angular.module ("cssclasses", []); app.Controller ("myctrl", fonction ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.saved); // Les valeurs illégales n'entreront pas sur l'utilisateur}); </cript> </ body> </html>3. Liaison à la forme et à l'état de contrôle
Dans Angular, une forme est une instance de Contrôleur Form. Les instances de formulaire peuvent être exposées à la portée à volonté en utilisant l'attribut de nom (je ne le comprends pas ici, il n'y a pas de propriété dans la portée qui a toujours été avec l'attribut de nom de formulaire, mais parce qu'il existe une méthode comme «Document. Nom du formulaire», il peut toujours être obtenu). De même, le contrôle est une instance du NGModelController. Les instances de contrôle peuvent être exposées pour former de manière similaire à l'aide de l'attribut de nom. Cela montre que les propriétés internes de la forme et du contrôle sont possibles pour la liaison dans les vues en utilisant des primitives de liaison standard.
Cela nous permet d'étendre l'exemple ci-dessus en suivant les fonctionnalités:
<! Doctype html> <html lang = "zh-cn" ng-app = "ControlState"> <éadf> <meta charset = "utf-8"> <tlecther> ControlState </tapie> <style type = "text / css"> .ng-cok {display: non; } .css-form input.ng-invalid.ng-diirty {background-Color: # fa787e; } .css-form input.ng-valid.ng-diirty {background-Color: # 78FA89; } </ style> </ head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formname"> name: <entrée ng-model = "user.name" name = "username" type = "text" requis> <br/> <div ng-show = "formname.username. $ dirty && formname.USURE. Nom </span> </ div> Email: <entrée ng-model = "user.email" name = "useremail" type = "e-mail" requis> <br/> <div ng-show = "formname.usemail. $ sale && formname.useremail. $ invalid"> pourboire: <span ng-show = "formname.usemail. $ error.requure ng-show = "formName.Useremail. $ error.email"> Ce n'est pas un e-mail valide </span> </div> sexe: <input value = "mâle" ng-model = "user.gender" type = "radio"> mâle <entrée valeur = "feme name = "userAgree" requis /> Je suis d'accord: <input type = "text" ng-show = "user.agree" ng-model = "user.agreesign" requis /> <div ng-show = "! formName.UserAragree ||! user.agreeSign"> S'il vous plaît convenir et signaler ~ </ div> <Button ng-Click = "réset ()" ng-disabled = "Isunchanged (utilisateur)"> réinitialiser </futton> <bouton ng-Click = "Update (user)" ng-disabled = "formName. $ invalid || iSunchanged (user)"> Enregistrer </fitton> </ form> <pre> form = {{user | JSON}} </ Pre> <Pre> Saved = {{Saved | JSON}} </ pre> </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> var app = angular.module ("ControlState", []); app.Controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.User = angular.copy ($ scope.saved); fonction (utilisateur) {return Angular.equals (user, $ scope.saved);}; $ scope.reset ();4. Validation personnalisée
Angular fournit des implémentations pour la plupart des champs de formulaire HTML publics (entrée, texte, numéro, URL, e-mail, radio, case à cocher), et il existe également des directives (obligatoire, modèle, inlength, maxLength, min, max) pour la vérification du formulaire.
Nous pouvons définir notre propre plug-in de vérification en définissant la directive dans le contrôleur NGMODEL (est-ce le NgModelController connecté ensemble?). Pour obtenir un contrôleur, la directive spécifie les dépendances comme dans l'exemple suivant (la directive définit l'attribut nécessaire dans l'objet).
Modèle pour afficher la mise à jour - chaque fois que le modèle change, toutes les fonctions dans le NGModelController. (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelcontroller#$SetValidity).
Voir pour modéliser la mise à jour - une manière similaire, peu importe chaque fois qu'un utilisateur interagit avec un contrôle, déclenchera ngModelController. $ SetViewValue. C'est maintenant le tour d'exécuter les analyseurs NGModelController (lorsque le contrôle obtient la valeur du DOM, toutes les méthodes de ce tableau seront exécutées, les valeurs seront examinées, filtrées ou converties et également vérifiées).
Dans l'exemple suivant, nous créerons deux directives.
Le premier est entier, qui est responsable de la vérification si l'entrée est un entier valide. Par exemple, 1,23 est une valeur illégale car elle contient la partie fractionnée. Notez que nous utilisons un décalage pour remplacer la poussée de la queue en l'inservant dans la tête du tableau, car nous voulons qu'il exécute d'abord et utilise la valeur de ce contrôle (estimant que le tableau est utilisé comme file d'attente), nous devons exécuter la fonction de vérification avant que la transformation ne se produise.
La deuxième directive est Smart-Float. Il convertit "1,2" et "1,2" en un numéro de point flottant juridique "1.2". Notez que nous ne pouvons pas utiliser le type d'entrée HTML5 "numéro" ici, car le navigateur ne permet pas aux utilisateurs d'entrer des caractères illégaux, tels que "1,2" (il ne reconnaît que "1.2").
<! Doctype html> <html lang = "zh-cn" ng-app = "customValidation"> <éadf> <meta charset = "utf-8"> <itle> customValidation </title> <style type = "text / css"> .ng-coak {display: non; } .css-form input.ng-invalid.ng-diirty {background-Color: # fa787e; } .css-form input.ng-valid.ng-diirty {background-Color: # 78FA89; } </ style> </ head> <body> <div> <form novalidate name = "formName"> <div> size (entier 0 - 10): <entrée entier type = "nombre" ng-model = "size" name = "size" min = "0" max = "10" /> {{size}} <br/> <pan ng-show = "Formname.Size. un entier valide </span> <span ng-show = "formname.size. $ error.min || formName.size. $ error.max"> la valeur doit être entre 0 et 10 </span> </v> <div> la longueur (point flottante): <entrée type = "Text" ng-model = "longueur" name = "longueur" intellige ng-show = "formName.length.0error.float"> Ce n'est pas un numéro de point flottant valide </span> </div> </ form> </ div> <script src = "../ angular-1.0.1.js" Type = "Text / Javascript"> </cript> <script type = "Text / javascript"> var app = Angular.Module ("CoustomValide", []); var Integer_regexp = / ^ / -? / d * $ /; app.Directive ("Integer", function () {return {require: "ngModel", // ngModelController link: function (scope, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (ViewValue) {// $ analyse, mises à jour à la vue pour modéliser if (Integer_regexp. // Certifiez et assurez-vous que Ctrl. var float_regexp = /^/-?/d+(?:ate., Lodal/d+)?$/; app.directive ("smartFloat", function () {return {require: "ngModel", link: function (scope, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (ViewValue) {if (float_regexp.test ", true); parsefloat (ViewValue.replace (",". ");} else {ctrl. $ setValidité (" Float ", false);5. Implémentation de contrôle de formulaire personnalisé (en utilisant ngModel)
Angular implémente les commandes de base de tous les HTML (entrée, SELECT, TextArea) et est compétent pour la plupart des scénarios. Cependant, si nous devons être plus flexibles, nous pouvons atteindre le but de personnaliser le contrôle de la forme en écrivant une directive.
Afin de développer des contrôles et NGMODEL pour travailler ensemble et implémenter la liaison des données bidirectionnelles, cela nécessite:
La mise en œuvre de la méthode de rendu est la méthode responsable du rendu des données après l'exécution et le passage de toutes les méthodes NgModelController. $ Formatrs.
Appelez la méthode $ setViewValue et le modèle doit être mis à jour en réponse, quelle que soit l'utilisateur interagit avec le contrôle. Ceci est généralement implémenté dans l'écouteur de l'événement DOM.
Vous pouvez voir $ compileprovider.directif pour plus d'informations.
L'exemple suivant montre comment ajouter une fonction de liaison de données bidirectionnelle à un élément qui peut être modifié.
<! Doctype html> <html lang = "zh-cn" ng-app = "customControl"> <adref> <meta charset = "utf-8"> <tight> CustomControl </title> <style type = "text / css"> .ng-coak {display: non; } div [ContentEdable] {Cursor: pointeur; Color d'arrière-plan: # d0d0d0; } </ style> </ head> <body ng-controller = "myctrl"> <div> <div tentyDitable = "true" ng-model = "contenu"> mon petit dada </v> <pre> modèle = {{contenu}} </ pre> <Button ng-Click = "reset ()"> résetter modèle Tirgger Tirgger à voir ($ rder) </ / bouton> </ / scénario src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> var app = angular.module ("coustomControl", []); app.Controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "Mon petit dada"; // comment obtenir ngModelController ici? Si vous savez, j'espère que vous pourrez me donner des conseils! Merci};}); app.Directive ("ContentEditable", function () {return {require: "ngModel", lien: function (scope, ele, attrs, ctrl) {// View -> modèle ele.bind ("blur keyup", function () {scope. $ applique (function () {console.log ("setViewValue"); ctrl. });});