AngularJS | Validación de formulario

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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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

Deja una respuesta Cancelar la respuesta