Los controles (entrada, selección, TextAREA) son una forma para que los usuarios ingresen datos. La forma es una colección de estos controles, con el propósito de agrupar controles relacionados.
Los formularios y los controles proporcionan servicios de verificación, para que los usuarios puedan recibir indicaciones para la entrada no válida. Esto proporciona una mejor experiencia de usuario, ya que los usuarios pueden recibir comentarios de inmediato y saber cómo corregir el error. Recuerde que si bien la verificación del cliente juega un papel importante en proporcionar una buena experiencia de usuario, se puede pasar por alto, por lo que la verificación del cliente no es confiable. La verificación del lado del servidor todavía es necesaria para una aplicación segura.
1. Forma simple
La directiva clave para comprender la unión de datos bidireccionales es NGModel. NgModel proporciona datos de datos bidireccionales de modelo a vista y vista al modelo. Y también proporciona API a otras directivas para mejorar su comportamiento.
<! DOCTYPE HTML> <html lang = "zh-cn" ng-app = "simple form"> <fead> <meta charset = "utf-8"> <title> PropertyEvaluation </title> <style type = "text/css"> .ng-cloak {pantalla: Ninguno; } </style> </head> <body> <div ng-controller = "myctrl"> <formul novalidate> name: <input ng-model = "user.name" type = "text"> <br/> correo electrónico: <input ng-model = "user.email" type = "correo electrónico"> <br/> género: <valor de entrada = "masculino" ng-model = "user.genter" type = "radio"> macho <input value = "femenino" ng-model = "user.gender" type = "radio"> femenino <br/> <botón ng-click = "reset ()"> restaurar Último </botón> <botón ng-Chick = "update (user)"> guardar </botte> </orm> <pre> form = {{user | user | JSON}} </ pre> <pre> saved = {{guardado | 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", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.saved); $ scope.reset ();2. Uso de clases CSS
Para hacer forma, controles y ngmodel rico en estilo, se puede agregar la siguiente clase:
En el siguiente ejemplo, use CSS para mostrar la validez de cada control de formulario. En el ejemplo, se requieren user.name y user.Email, pero cuando se modifican (sucios), el fondo aparecerá rojo. Esto asegura que el usuario no se distraiga con un error hasta que después de interactuar con el formulario (¿después del envío?) Y descubre que no se cumple su validez.
<! Doctype html> <html lang = "zh-cn" ng-app = "cssclasses"> <head> <meta charset = "utf-8"> <title> cssclasses </title> <style type = "text/css"> .ng-cloak {display: no; } .css-form de entrada.ng-invalid.ng-dirty {background-color: #fa787e; } .css-form de entrada.ng-valid.ng-dirty {background-color: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form de formato novalidate = "formname"> nombre: <input ng-model = "user.name" type = "text" requerido> <br/> correo electrónico: <input ng-model = "user.email" type = "correo electrónico" ng-model = "user.gender" type = "radio"> macho <input value = "femenino" ng-model = "user.gender" type = "radio"> femenino <br/> <botón ng-click = "reet ()"> reiniciar </botón> <botón ng-Click = "actualización (usuar)"> Guardar </botón> </form> <pre> formar = {{user | user | | JSON}} </ pre> <pre> saved = {{guardado | 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", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copy ($ scope.saved); $ scope.reset ();3. Enlace al estado de formulario y control
En Angular, una forma es una instancia de FormController. Las instancias de formulario pueden expuestos al alcance a voluntad utilizando el atributo de nombre (no lo entiendo aquí, no hay propiedad en el alcance que siempre ha sido con el atributo de nombre de formulario, pero debido a que hay un método como "documento. Nombre de formulario", todavía se puede obtener). Del mismo modo, el control es una instancia del NGModelController. Las instancias de control se pueden exponer a la forma de manera similar utilizando el atributo de nombre. Esto muestra que las propiedades internas de la forma y el control son factibles para la unión en las vistas que utilizan primitivas de unión estándar.
Esto nos permite extender el ejemplo anterior siguiendo las características:
<! DocType html> <html lang = "zh-cn" ng-app = "controlstate"> <fead> <meta charset = "utf-8"> <title> controlstate </title> <style type = "text/css"> .ng-cloak {pantalla: ninguno; } .css-form de entrada.ng-invalid.ng-dirty {background-color: #fa787e; } .css-form de entrada.ng-valid.ng-dirty {background-color: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form de formato novalidate = "formname"> name: <input ng-model = "user.name" name = "username" type = "text" requerido> <br/> <div ng-show = "formname.username. $ sucio & & formname.username. Nombre </span> </div> correo electrónico: <input ng-model = "user.email" name = "userEmail" type = "correo electrónico" requerido> <br/> <div ng ng-show = "formname.useremail. $ sucio && formname.useremail. $ $ inválido"> consejo: <span ng-show = "formname.useremail. $ error. ng-show = "formname.userEmail. $ error.email"> Este no es un correo electrónico válido </span> </div> género: <input value = "masculino" ng-model = "user.gender" type = "radio"> masculino <input valor = "femenino" ng-model = "user.gender" type = "radio"> femenino <br/> <input type = "checkbox" ng-model " name = "userAgree" required/> I de acuerdo: <input type = "text" ng-show = "user.agree" ng-model = "user.agreesign" requerido/> <div ng ng-show = "! FormName.Useragree || ng-disabled = "isunchanged (usuario)"> restablecer </boton> <button ng-click = "update (user)" ng-disable = "formname. $ invalid || isunchanged (user)"> guardar </button> </orm> <pre> form = {{user | JSON}} </ pre> <pre> saved = {{guardado | 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.user.copy ($ scope.saved); = función (usuario) {return angular.equals (usuario, $ scope.saved);4. Validación personalizada
Angular proporciona implementaciones para la mayoría de los campos de formulario HTML público (entrada, texto, número, URL, correo electrónico, radio, casilla de verificación), y también hay directivas (requeridas, patrón, inlumbe, maxLength, min, max) para la verificación de formulario.
Podemos definir nuestro propio complemento de verificación definiendo la directiva en el controlador NGModel (¿es este el NgModelController conectado?). Para obtener un controlador, la Directiva especifica las dependencias como en el siguiente ejemplo (la Directiva define el atributo Requerir en el objeto).
Modelo para ver la actualización: cada vez que cambia el modelo, todas las funciones en el ngmodelcontroller. $ Formatters (desencadenando la validación de datos y el formateo de la conversión cuando el modelo cambia) se colocará en cola para la ejecución, por lo que cada función aquí tiene la oportunidad de formatear el valor del modelo y modificar el estado de verificación del control a través del estado de verificación de NgModeler. $ Setvalidity (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelcontroller#$setvalidity).
Vista para modelar la actualización: de una manera similar, no importa cuando un usuario interactúe con un control, se activará NgModelController. $ SetViewValue. Ahora es el turno de ejecutar NGModelController $ Parsers (cuando el control obtiene el valor del DOM, todos los métodos en esta matriz se ejecutarán, los valores se revisarán, filtrarán o convertirán, y también se verificará).
En el siguiente ejemplo, crearemos dos directivas.
El primero es entero, que es responsable de verificar si la entrada es un entero válido. Por ejemplo, 1.23 es un valor ilegal porque contiene la parte fraccional. Tenga en cuenta que usamos Unphift para reemplazar la empuje de la cola insertándola en el cabezal de la matriz, porque queremos que ejecute primero y use el valor de este control (estimando que la matriz se usa como una cola), necesitamos ejecutar la función de verificación antes de que ocurra la transformación.
La segunda directiva es Smart-Float. Convierte "1.2" y "1,2" en un número de punto flotante legal "1.2". Tenga en cuenta que no podemos usar el "número" de entrada HTML5 aquí, porque el navegador no permite a los usuarios ingresar caracteres ilegales que esperamos, como "1,2" (solo reconoce "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 de entrada.ng-invalid.ng-dirty {background-color: #fa787e; } .css-form de entrada.ng-valid.ng-dirty {background-color: #78fa89; } </style> </head> <body> <div> <form de no novalidate name = "formname"> <div> size (entero 0-10): <input integer type = "number" ng-model = "size" name = "size" min = "0" max = "10"/> {{{size}} <br/> <span ng-show = "formname.ame.siny. un entero válido </span> <span ng-show = "formname.size. $ error.min || formname.size. $ error.max"> El valor debe ser entre 0 y 10 </pan> </div> <div> div> longitud (punto flotante): <input type = "text" ng-model = "longitud" name = "longitud" smart-float/>} {{longitud {{}}}}}}} ng-show="formName.length.0error.float">This is not a valid floating point number</span> </div> </form></div><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 enlace: function (scope, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewValue) {// $ Parsers, actualizaciones de modelado if (integer_regeGE (viewValue) // certificar y asegúrese de ctrl. var float_regexp = /^/-?/d+(?:=.,font>/d+)?$/; app.directive ("smartFloat", function () {return {request: "ngmodel", link: function (scope, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewValue) {if (float_regexp.test (viewValue)) {ctrl. parsefloat (vervalue.replace (",", ".");5. Implementación de control de formulario personalizado (usando NGModel)
Angular implementa los controles básicos de todos los HTML (entrada, selección, TextARea) y es competente para la mayoría de los escenarios. Sin embargo, si necesitamos ser más flexibles, podemos lograr el propósito de personalizar el control de formulario escribiendo una directiva.
Para desarrollar controles y ngmodel para trabajar juntos e implementar la unión de datos bidireccionales, requiere:
Implementar el método Render es el método responsable de representar datos después de ejecutar y aprobar todos los métodos NGModelController. $ Formatters.
Llame al método $ setViewValue, y el modelo debe actualizarse en respuesta sin importar cuándo el usuario interactúe con el control. Esto generalmente se implementa en el oyente de eventos DOM.
Puede ver $ compileprovider.Directive para obtener más información.
El siguiente ejemplo muestra cómo agregar una función de enlace de datos de dos vías a un elemento que se puede editar.
<! DocType html> <html lang = "zh-cn" ng-app = "customControl"> <head> <meta charset = "utf-8"> <title> customControl </title> <style type = "text/css"> .ng-cloak {pantalla: Ninguno; } div [contento] {cursor: pointer; Color de fondo: #D0D0D0; } </style> </head> <body ng-concontroller = "myctrl"> <div> <divtenteditable = "true" ng-model = "content"> my pequeño dada </div> <pre> model = {{content}} </ pre> <botón ng-click = "reset ()" Modelo de reset Tirgger a ver ($ render) <button </button </button <script <script <script = "reset ()" src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> var app = angular.module ("customControl", []); app.controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "my pequeño dada"; // cómo obtener ngmodelcontroller aquí? Si lo sabe, espero que pueda darme algunos consejos! gracias};}); app.directive ("Contentedable", function () {return {request: "ngmodel", link: function (scope, ele, attrs, ctrl) {// ver -> modelo ele.bind ("blur keyUp", function () {Scope. $ Aplicar (function () {Console.log ("setViewValue"); Ctrl. $ SetViewValue (ELE.TEXT ()); }); </script> </body> </html>