Recientemente, los errores restantes de los componentes mantenidos en la mano son la verificación de formulario, y la lógica dentro del código de verificación de formulario de la empresa no ha sido claro durante generaciones, y la estructura del código no es muy angular.
Es muy necesario tener una comprensión profunda de la verificación de la forma.
<Body Ng-Controller = "MainController"> <Form name = "Form" Novalidate = "Novalidate"> <input name = "text" type = "correo electrónico" ng-model = "name"> </form> </body>
Ngmodel es una magia negra angular, que realiza la unión bidireccional. Cuando cambia el valor de nombre, el valor de entrada también cambiará.
Cuando la entrada del usuario cambia el valor, el valor del nombre también cambiará.
El propósito de Novalidate = "Novalidate" es eliminar la verificación de formulario que viene con el sistema.
Después de analizar el código anterior, Angular generará una variable "formulario" y $ alcance. Forma bajo el alcance $ de MainController. El nombre de esta variable es el mismo que Form.Name in html.
Y $ Scope.Form.Text es el modelo del cuadro de entrada de texto, heredado de NGModelController.
Donde $ scope.form instancia es de FormController. Su contenido es:
El modelo (es decir, $ scope.form.text) del cuadro de entrada de texto es:
Donde $ Dirty/$ Pristine, $ válido/$ inválido, $ error son atributos comunes. Especialmente $ $ error.
La verificación de forma más fácil:
Después de comprender el formulario y el cuadro de entrada, primero puede editar el comando más simple para mostrar el error.
El contenido HTML es el siguiente:
<form de nombre = "form" novalidate = "novalidate"> <input name = "text" type = "correo electrónico" ng-model = "nombre"-tip> </orm>
El código de comando es el siguiente:
// Cuando se produce el error del cuadro de entrada, el error se muestra directivo ("errortip", function ($ compile) {return {restrict: "a", request: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {// crea subscopeVar = $ scope. $ New (), // cuando hay un error, el error de error, el error de un error es un error de error. ng-if = "hasError ()"> {{errores () | {Correo electrónico: true, xxx: true, xxxx: trie} $ scope.errors = function () {return $ ngmodel. $ error;} // compile las instrucciones incorrectas y colóquela en el cuadro de entrada después de $ element.after ($ compile (tip) (subscope));}}});Echemos un vistazo a los resultados de la ejecución primero:
Al ingresar una dirección de correo electrónico no válida:
Al ingresar la dirección de correo electrónico correcta:
La Directiva ERRORTIP comienza obteniendo el NgModelController a través de la requisito: "NGModel". Luego cree un elemento para mostrar el error en el cuadro de entrada.
$ compile se usa aquí, y $ compile se usa para compilar y mostrar dinámicamente contenido HTML.
Cuando hay un contenido de error, se mostrará el elemento incorrecto.
¿Por qué el subscope puede acceder a los métodos de Haselror y errores?
Debido a la cadena prototipo. Solo mira la imagen a continuación para saber.
Personalizar contenido de error
Ok, es obvio que la verificación de formulario no está disponible ahora. Debemos personalizar el contenido de error que se mostrará, y hay más de un error que se debe mostrar.
Use Ng-Repeat para mostrar múltiples errores, es decir, use el comando "errortip"
tip = '<span ng-if = "hasErRor ()"> {{errores () | json}} </span> ';Cambio a:
tip = '<ul ng-if = "hasErRor ()" ng-repeat = "(errorkey, errorValue) en errores ()">' +'<span ng-if = "errorValue"> {{errorkey | ErrorFilter}} </span> ' +' </ul> ';donde ErrorFilter es un filtro para la visualización personalizada de los mensajes de error. Un filtro es en realidad una función.
El código es el siguiente:
.filter ("ErrorFilter", function () {return function (input) {var errorMessageMap = {correo electrónico: "Ingrese la dirección de correo electrónico correcta", xxoo: "No adecuado para niños"} return errorMessegesMap [input];}});Los resultados son los siguientes:
Ok, aquí podemos manejar la verificación de forma "simple". Sí, simple. Debemos continuar profundizando.
¡Verificación de formulario personalizado!
Luego implementemos una verificación de formulario que no se puede ingresar en "guapo tipo".
Las instrucciones son las siguientes:
.Directive ("DonotinPuthandSomeBoy", function ($ compile) {return {restrict: "a", require: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (valor) {value === "Handsome") {/// Inválido, $ error se convertirá en {guapo: true} $ ngmodel. $ setValidity ("guapo", false);} valor de retorno;})}}})Los resultados son los siguientes:
Aquí hay dos cosas clave, $ ngmodel. $ Analizadores y $ ngmodel. $ SetValidity.
$ ngmodel. $ parsers es una matriz. Al ingresar contenido en el cuadro de entrada, atraviesará y ejecutará las funciones en $ analizadores.
$ ngmodel. $ setValidity ("guapo", falso); Configurar guapo a inválido establecerá $ ngmodel. $ Error ["guapo"] = true;
Eliminar $ ngmodel. $$ éxito ["guapo"] también está configurado, y puede buscar el código fuente para obtener más detalles.
Aquí resumiré el proceso.
-> entrada del usuario
-> Angular ejecuta todas las funciones en $ analizadores
-> inspeccionar $ setValidity ("xxoo", falso); Entonces XXOO se establecerá en $ ngmodel. $ Error ["xxoo"]
-> Entonces la instrucción ERRORTIP se repitirá $ ngmodel. $ Error
-> ErrorFilter escapará del mensaje de error
-> El mensaje de error se mostró al final
Personalizar el contenido de visualización del cuadro de entrada
Muchas veces, el desarrollo no es tan simple como verificar los errores y mostrar errores. A veces tenemos que formatear el contenido del cuadro de entrada.
Por ejemplo, "1000" se muestra como "1,000"
"Hola" aparece como "hola"
Ahora implementemos iniciales automáticas.
El código fuente es el siguiente:
<form de nombre = "form" novelidate = "Novalidate"> <input name = "text" type = "text" ng-model = "name" superior-case> </form> .directive ("uppercase", function () {return {Restricción: "A", requerir: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var viewValue; if (angular.isuDefined (value)) {viewValue = ";} más ViewValue [0] .ToUpperCase () + ViewValue.substring (1); // Establezca el contenido de la interfaz $ Ngmodel. $ SetViewValue (ViewValue); // recurso a la interfaz, esta función es muy importante $ ngmodel. $ render ();Aquí usamos $ setViewValue y $ render, $ setViewValue para establecer ViewValue en el valor especificado y $ Render Muestra ViewValue a la interfaz.
Muchas personas piensan que usar $ SetViewValue puede actualizar la interfaz, pero no usan $ Render, y al final, la interfaz no se ha actualizado sin importar lo que haga.
Si solo $ ngmodel. $ Analizadores no es suficiente, $ analizadores solo se activa cuando el usuario ingresa contenido nuevo en el cuadro de entrada. Otra situación es que el contenido del cuadro de entrada debe actualizarse:
Eso es vinculante bidireccional. Por ejemplo, el cuadro de entrada justo ahora está vinculado a $ scope.name en MainController. Cuando el usuario cambia $ scope.ame a "hola" de otras maneras, la capitalización de la primera letra no se puede ver en el cuadro de entrada.
En este momento, debe usar $ Formathers, así que veamos un ejemplo primero.
<Body ng-Controller = "MainController"> <Form Name = "Form" Novalidate = "Novalidate"> <Button ng-Chick = "Random ()"> Random </boton> <input name = "text" type = "text" ng-model = "name" super-case> </form> </body> </body>
Contenido de controlador principal:
Angular.module ("App", []). Controller ("principalController", function ($ scope, $ timeOut) {$ scope.random = function () {$ scope.name = "hello" + math.random ();}})Es bastante simple. Cuando hace clic en el botón, $ scope.ame se convierte en un contenido aleatorio que comienza con Hello.
Es obvio que la carta inicial de Hello no está en mayúscula, no lo que queremos.
Modificamos el contenido del siguiente comando:
.Directive ("upperCase", function () {return {restrict: "a", require: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (valor) {var viewValue = UppercaseFirstWord (HangeEmtyvalue (valor); $ ngmodel. $ setViewValue (ViewValue); // Renderizar a la interfaz, esta función es muy importante $ ngmodel. $ render (); y convertir todo el contenido en la función de cadena HandleEmptyValue (valor) {return Angular.isundefined (valor)?Para resumir:
1.
-> El usuario ingresa contenido en el cuadro de entrada
-> transversal angular de la función en $ ngmodel. $ parsers convierte el contenido de entrada y luego lo establece en $ ngmodel. $ modelValue
-> En la función en la matriz $ ngmodel. $ Parsers, modificamos $ ngmodel. $ ViewValue y luego $ ngmode. $ Render () renderiza el contenido.
2.
-> Generar cadenas aleatorias a través de botones para configurar
-> Cada vez que la detección sucia determinará si el valor del nombre es inconsistente con $ Ngmodel. $ ModelValue (aquí se implementa usando $ Watch). Si es inconsistente, itera a través de todas las funciones en $ formadores en orden inverso y ejecute, y asigne el valor de devolución final a $ ngmodel. $ ViewValue
-> Actualizar el contenido del cuadro de entrada
¿Se puede optimizar el ejemplo "Personalizar el contenido de visualización del cuadro de entrada"?
¿Por qué optimizar?
La razón es muy simple. Para implementar el "contenido personalizado", se utilizan $ analizadores y $ formatrizs. De hecho, ¡el contenido de los dos es muy similar! Esto es muy importante.
¿Cómo optimizar?
Use $ Ngmodel. $ Validadores.
Ok, ahora cambia el ejemplo.
.Directive ("upperCase", function () {return {restrict: "a", require: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {// 1.3 es compatible. Ya sea que ingrese manualmente o actualice modelValue a través de otros lugares, $ ngmodel. $ validators.Uppercase, modelValue, ViewValue, ViewValue) viewValue = upperCaseFirstWord (handleEmptyValue (modelValue)); // Establecer el contenido de la interfaz $ ngmodel. $ setViewValue (ViewValue); // recurso a la interfaz, esta función es muy importante $ ngmodel. $ render ();/return true, indicando que la verificación se pasa, no hay significado aquí, verdadero;} en la función de cadena HandleEmptyValue (valor) {return Angular.isundefined (valor)?El código es mucho más simple, solo compatible con $ ngmodel. $ Validadores en la versión 1.3 o superior.
Si el valor de retorno de $ ngmodel. $ Validadors.uppercase la función es falso, entonces $ ngmodel. $ Error ['uppercase'] = true. Esto es similar a $ ngmodel. $ SetValidity ("uppercase", falso).