Validación de la entrada del usuario en un formulario en Angular JS

Validación de la entrada del usuario en un formulario en Angular JS

A menudo he visto a desarrolladores de nivel básico que luchan con la validación de entradas de usuario en aplicaciones de una sola página de AngularJS. En esta publicación, daré una introducción rápida pero útil de las validaciones en AngularJS; Considere esta publicación como un documento de aprendizaje base a partir del cual puede aprender más.

8min read

A menudo he visto a desarrolladores de nivel básico que luchan con la validación de entradas de usuario en aplicaciones de una sola página de AngularJS. En esta publicación, daré una introducción rápida pero útil de las validaciones en AngularJS; Considere esta publicación como un documento de aprendizaje base a partir del cual puede aprender más.

Comencemos con un ejemplo como se muestra en la imagen a continuación. Tiene un formulario de registro con tres campos con las siguientes restricciones.

  1. Nombre: Obligatorio
  2. Correo electrónico: Obligatorio y escriba Correo electrónico
  3. Contraseña: Obligatoria, escriba la contraseña y longitud mínima 6
Tiene un formulario de registro con tres campos

Queremos validar las reglas mencionadas anteriormente en el lado del cliente. Hay dos formas en que se puede realizar la validación del lado del cliente en una aplicación de una sola página basada en AngularJS:

  • Uso de las validaciones HTML5
  • Using the AngularJS validation directives
  • Una combinación de ambos

HTML5 Validation

Aquí hemos creado el formulario Agregar usuario que se muestra arriba utilizando el marcado que se enumera a continuación:

  <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

Estamos aplicando toda la validación de usuario requerida utilizando las validaciones de HTML 5.  Cuando enviamos un formulario con datos de usuario no válidos, HTML5 devolverá un error como se muestra a continuación:

Cuando enviamos un formulario con datos de usuario no válidos, HTML5 devolverá un error como se muestra

HTML5 devuelve este error en la interfaz de usuario. La validación de HTML5 no funcionará en navegadores que no sean compatibles con HTML5. Algunos puntos sobre las técnicas de validación son los siguientes:

  • La validación no funcionará en navegadores, no es compatible con HTML5
  • Se mostrará el error HTML 5 (como se muestra en la imagen de arriba) para la entrada de usuario no válida
  • La entrada de usuario no válida se establecerá en un valor indefinido en el controlador

Ahora intentemos leer el valor de las entradas del usuario en el controlador. No olvide adjuntar un controlador al formulario.

console.log('user name : ' + $scope.userfullName);
console.log('user email : ' +$scope.useremail);
console.log('user password :' +$scope.userpassword);

Aquí estamos validando el formulario y las entradas del usuario utilizando la validación de HTML 5. Podemos enviar el formulario incluso si algunas de las entradas no son válidas. El valor de entrada no válido se establecería en undefined en el controlador. Como puede ver en la imagen a continuación, para el campo de correo electrónico, la entrada no es válida y en el controlador, el valor de correo electrónico no válido se establece en indefinido.

Podemos enviar el formulario incluso si algunas de las entradas no son válidas.

De la técnica de validación mencionada se pueden extraer dos observaciones importantes:

  1. Pudimos enviar el formulario incluso si el formulario no era válido
  2. Para las entradas no válidas, el valor se estableció en undefined en el controlador

Si queremos que el formulario no se envíe cuando no es válido, entonces en lugar de hacer clic en el botón, usaremos la directiva ng-submit en el formulario en sí:

 <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

En el ng-submit llamamos a una función AddUser desde el controlador con un parámetro formname.$valid. Esta función de envío solo se llamará cuando un formulario sea válido o, en otras palabras, toda la entrada del usuario del formulario sea válida. Tenga en cuenta que en este caso no se enviaría si el formulario no es válido. En el ejemplo anterior, vimos que incluso si el formulario no era válido, podíamos enviar el formulario y, para los campos de entrada no válidos, se pasaba un valor indefinido en el controlador. Sin embargo, aquí no podemos enviar el formulario si no es válido.

AngularJS Validation

Otra opción es validar la entrada del usuario solo usando las directivas AngularJS. Para trabajar solo con la validación de AngularJS, debemos realizar las siguientes tareas:

  1. Utilice novalidate en el formulario para deshabilitar la validación HTML.
  2. Instead of HTML validations use AngularJS validation directives.

Podemos crear el formulario con las validaciones de usuario requeridas utilizando solo las directivas de validación de AngularJS como se muestra en la lista a continuación:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

Estamos usando el atributo novalidate para deshabilitar la validación de HTML5 y validar la siguiente entrada de usuario:

  1. Todos los campos son obligatorios.
  2. La longitud mínima del campo de contraseña es 6.

Al enviar el formulario, la entrada del usuario se validará utilizando las directivas de validación de AngularJS. Si el usuario no proporciona un valor para el nombre o proporciona menos de seis caracteres para el campo de contraseña, el formulario se enviará con el valor undefined para las entradas de usuario no válidas.

Al enviar el formulario, la entrada del usuario se validará utilizando las directivas de validación de AngularJS.

Como habrás notado, cuando no usamos validaciones de HTML 5 y confiamos en las validaciones de AngularJS, suceden dos cosas:

  1. Los formularios se envían incluso si todas las entradas del usuario no son válidas
  2. No se muestra ningún mensaje de error para la entrada de usuario no válida

Deshabilitar el botón Enviar si el formulario no es válido

Podemos desactivar el botón de envío si el formulario no es válido o si alguna de las entradas del usuario no es válida. Usemos la propiedad AngularJS$valid para deshabilitar el botón de envío si el formulario no es válido:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-disabled="!adduser.$valid" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

Aquí estamos usando la directiva ng-disabled para deshabilitar el botón. Como se ve en la imagen a continuación, se utiliza una propiedad $valid para verificar si el formulario es válido o no. No olvides que adduser es el nombre del formulario.

Mostrar el mensaje de error

A diferencia de las reglas de validación HTML5, de forma predeterminada, las directivas de validación de AngularJS no muestran ningún mensaje de error para la entrada de usuario no válida. Sin embargo, podemos mostrar el mensaje de error como se muestra en el listado a continuación. Estamos usando las propiedades $valid y $pristine para mostrar el mensaje de error:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

El mensaje de error se mostrará como se muestra en la imagen a continuación:

El mensaje de error se mostrará como se muestra

Aplicar estilo al mensaje de error y al control de entrada

Usando las propiedades $valid y $pristine, podemos mostrar el mensaje de error y crear un estilo para él usando la lista a continuación:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg" ng-class="{ 'has-error' : adduser.name.$invalid && !adduser.name.$pristine }">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

Ahora, el mensaje de error se mostrará con el estilo que se muestra en la imagen a continuación:

Ahora, el mensaje de error se mostrará con el estilo que se muestra

Lectura de propiedades de validación en el controlador

En el controlador, podemos leer si el formulario es válido o no, utilizando la propiedad $valid en el nombre del formulario. Si todas las entradas del usuario son válidas, obtendremos un valor de $valid propiedad true. Si el formulario es válido o no se puede verificar en el controlador como se muestra en el listado a continuación:

if ($scope.adduser.$valid) {
   alert('all inputs are valid ');
}
else {
   alert('all inputs are not valid ');
}

AngularJS Validation Properties

Al trabajar con la validación de AngularJS, las siguientes son propiedades importantes:

Al trabajar con la validación de AngularJS, las siguientes son propiedades importantes

Podemos usar estas propiedades junto con el nombre del formulario para realizar varias tareas de validación.

¡Así que ahí lo tienes! Hemos explorado cómo puede usar una combinación de validaciones HTML5 y directivas de validación de AngularJS para validar el formulario y las entradas del usuario en AngularJS. Espero que este post te resulte útil, ¡gracias por leer!

Angular How To
Solicitar una demostración