AngularJS realiza la validación de formularios en el lado del cliente. AngularJS monitorea el estado del formulario y los campos de entrada (entrada, área de texto, selección) y notifica al usuario sobre el estado actual. AngularJS también contiene información sobre si los campos de entrada se han tocado, modificado o no.
Los campos de entrada de formulario tienen los siguientes estados:
- $untouched: Muestra que el campo aún no ha sido tocado.
- $tocado: Muestra que campo ha sido tocado.
- $pristine: Representa que el campo aún no ha sido modificado.
- $dirty: Ilustra que el campo ha sido modificado.
- $invalid: Especifica que el contenido del campo no es válido.
- $valid: Especifica que el contenido del campo es válido.
Todas estas son las propiedades del campo de entrada que pueden ser verdaderas o falsas.
Los formularios tienen los siguientes estados:
- $pristine: Representa que los campos aún no han sido modificados.
- $dirty: Ilustra que uno o más campos han sido modificados.
- $invalid: Especifica que el contenido del formulario no es válido.
- $valid: Especifica que el contenido del formulario es válido.
- $submitted: Especifica que se envía el formulario.
Todas estas son las propiedades de la forma que puede ser verdadera o falsa.
Estos estados se pueden usar para mostrar mensajes significativos al usuario.
Ejemplo 1:
<!DOCTYPE html> < html > < script src = </ script > < body ng-app = "" > < form name = "form1" > < p >Name: < input name = "username" ng-model = "username" required> < span ng-show = "form1.username.$pristine && form1.username.$invalid" > The name is required.</ span > </ p > < p >Address: < input name = "useraddress" ng-model = "useraddress" required> </ p > </ form > < p >We use the ng-show directive to only show the error message if the field has not modified yet AND content present in the field is invalid.</ p > </ body > </ html > |
Salida:
Validación personalizada: para crear su propia función de validación, agregue una nueva directiva a su aplicación y maneje la validación dentro de una función con ciertos argumentos específicos.
Ejemplo 2: Cree su propia directiva, que contenga una función de validación personalizada, y consúltela utilizando la directiva de aplicación. El campo solo será válido si el valor es mayor o igual a 18.
<!DOCTYPE html> < html > < script src = </ script > < body ng-app = "developapp" > < form name = "form1" > Username: < input name = "username" required>< br >< br > Age: < input name = "userage" ng-model = "userage" required app-directive> </ form > < p >The input's valid state is:</ p > < h1 >{{form1.userage.$valid}}</ h1 > < script > var app = angular.module('developapp', []); app.directive('appDirective', function() { return { require: 'ngModel', link: function(scope, element, attr, mCtrl) { function myValidation(value) { if (value >=18) { mCtrl.$setValidity('charE', true); } else { mCtrl.$setValidity('charE', false); } return value; } mCtrl.$parsers.push(myValidation); } }; }); </ script > < p >The input field must have user age greater than 18 to be considered valid for voting.</ p > </ body > </ html > |
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA