Agregar validación de formulario personalizado en AngularJS
- Validadores de formularios en AngularJS
- Validadores personalizados en AngularJS
- Pasos para crear o agregar una validación de formulario personalizada en AngularJS
La validación es un proceso de exploración de la corrección de los datos de entrada, normalmente para la corrección de errores o la coherencia de los datos. La validación personalizada de AngularJS es una biblioteca poderosa que permite a los desarrolladores crear reglas de validación personalizadas.
En este artículo, discutiremos todo sobre la validación personalizada de AngularJS. Comencemos con los validadores de formularios.
Validadores de formularios en AngularJS
Hay dos tipos de formas fundamentales compatibles con Angular.
- Formularios basados en plantillas
- Formas reactivas
El formulario basado en plantillas proporciona una forma declarativa, fácil de usar y bien probada de crear un formulario. Este es el formulario predeterminado en Angular.
El formulario reactivo es una API de más bajo nivel que le brinda más control sobre el comportamiento de su formulario. Está diseñado para utilizar fuentes de datos reactivas, como observables o emisores de eventos.
Cada campo en un formulario puede funcionar como un FormControl, devolviendo información específica sobre ese campo, como si el formulario es válido, el valor real del campo y otros detalles.
Validadores personalizados en AngularJS
Angular tiene un sistema incorporado para validar datos llamado Validator API. Pero, cuando se trata de reglas de validación más complejas o cuando las reglas de validación son específicas de su aplicación, puede usar validadores personalizados.
Los validadores personalizados en Angular son muy útiles porque permiten a los desarrolladores crear sus propias reglas de validación sin depender de bibliotecas externas. También hacen que sea más sencillo para los desarrolladores extender la lógica de validación fuera de Angular y otras partes de la aplicación.
Es importante tener en cuenta que la validación personalizada de AngularJS se puede usar con cualquier otra biblioteca de validación, como jQuery, pero no es obligatorio.
Pasos para crear o agregar una validación de formulario personalizada en AngularJS
Los siguientes pasos lo guiarán en la creación de la validación de formulario personalizado de AngularJS.
- Cree un nuevo proyecto AngularJS.
- Incluya el archivo CSS
ng-bootstrapen nuestro archivoindex.html. - Agregue el archivo JavaScript
ng-bootstrapa nuestro archivoindex.html. - Cree un formulario personalizado con un campo de entrada en la página HTML e inclúyalo en la sección del cuerpo de
index.html. - Cree un controlador Angular y agréguelo a
index.html. - Cree una directiva de formulario Angular y agréguela a
index.html. - Inyecte el controlador de formulario en nuestro controlador angular.
Analicemos un ejemplo de validación de formulario personalizado en AngularJS.
Código HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
</head>
<body ng-app="FormValidationExample">
<div ng-controller="ctrlForm">
<form name="myForm" novalidate>
<div class="input-item">
<label for="txtEmail">Your email</label><br>
<input type="email" name="email" id="txtEmail" class="text-box" ng-model="email" required custom-focus />
<div class="error-wrapper" ng-show="myForm.email.$dirty && myForm.email.$invalid && !myForm.email.$focused">
<span ng-show="myForm.email.$error.required">Email is required</span>
<span ng-show="myForm.email.$error.email">Please enter a valid email address</span>
</div>
</div>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</body>
</html>
Código JavaScript:
angular.module('FormValidationExample', [])
.controller('ctrlForm', ['$scope', function($scope) {
$scope.checkboxes_motives = { 'checked': false, items: {} };
$scope.choices = ['work', 'play'];
$scope.selectAllMotives = function(value) {
angular.forEach($scope.choices, function (motive) {
$scope.checkboxes_motives.items[motive] = value;
});
};
}])
.directive('customFocus', [function() {
var FOCUS_CLASS = "custom-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
}
}]);
En este ejemplo, validamos una dirección de correo electrónico. Si escribe una dirección de correo electrónico incorrecta aquí, se mostrará un error hasta que la corrija o a menos que la corrija.
Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook