Validación de Email en Angular

1. Validación de entrada en Angular
2. Formas de validar direcciones de Email en Angular
3. Validación de AngularJS (Email) con expresiones regulares y ng-pattern:

AngularJS proporciona una validación de datos de entrada fácil en el lado del cliente. Muchos campos de entrada pueden estar presentes en su formulario, lo que ayudará a recopilar datos de sus usuarios. Sin embargo, antes de hacer nada con los datos, debe validar los valores en los campos. En este artículo, discutiremos cómo validar el Email en AngularJS.

Validación de entrada en Angular

Los datos de un control de entrada se validan mediante una validación. Si la información no pasa la validación, el usuario recibirá un mensaje de error. Campo requerido, Longitud mínima, Longitud máxima, Patrón y muchos otros tipos de validación existen en AngularJS.

Sintaxis de validación de Email en AngularJS:

<form name="Form">

  Code: <input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" />
  
  <span ng-show="personForm.pincode.$error.pattern"> Only numbers allowed </span>
  
  </form>

Formas de validar direcciones de Email en Angular

Angular tiene varios métodos para validar correos electrónicos, algunos de los cuales se enumeran a continuación:

Validación incorporada: Angular ha instalado específicamente validadores de Email que puede usar para verificar las direcciones de Email proporcionadas por el usuario.

Validación de patrón: puede especificar un patrón de validación de Email angular de expresión regular (regex) que debe coincidir con el valor proporcionado por el usuario antes de que se produzca la validación.

Ejemplo de validación de Email:

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div class="Sample">
    <div class="form-area" ng-controller="formCtrl">  
        <form role="form" name="inquiryForm" novalidate>
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px; text-align: center;">Example</h3>

					<div class="form-group">
						<input name="email" ng-model="email" id="eml" type="text" ng-pattern="eml_add" ng-required="true" autocomplete="off" placeholder="Email" class="form-control" >            
					</div>

            
        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" ng-disabled="inquiryForm.$invalid">Submit Form</button>
        </form>
    </div>
</div>
</div>

Validación de AngularJS (Email) con expresiones regulares y ng-pattern:

En AngularJS, puede usar expresiones regulares (RegEx) para formar validaciones. Deberá usar la directiva ng-pattern para trabajar con las expresiones. ¿Qué es ng-pattern? Discutámoslo.

Directiva ng-pattern en AngularJS

El patrón ng en angularjs se usa para validar los controles de texto de entrada usando expresiones regulares. Si el texto de entrada se valida de acuerdo con la condición, el comando ng-pattern devuelve verdadero; de lo contrario, arroja un error. Para obtener más información sobre ng-pattern, haga clic aquí.

Antes de discutir en detalle, debe tener la idea de la siguiente directiva:

• ng-minlength: Proporciona la longitud más corta posible.
• ng-maxlength: Proporciona la mayor longitud posible.
• ng-model: Asigna atributos de validación al campo, como $error, $valid, etc.
• ng-required: Esto se utiliza para proporcionar el campo requerido.
• ng-show: Este comando muestra un mensaje de error basado en un parámetro.

Para comenzar, debe agregar ng-messages como una dependencia del módulo porque puede ser necesario.

<form name="form">
            
  <input type="email" name="emailID" ng-model="email"
      placeholder="Enter an Email ID"
      ng-required="true" 
      ng-pattern=" ^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$"/>

      <div *ngIf="firstEmail.errors || firstEmail.touched">
        <small class="text-danger" *ngIf="firstEmail.errors.required">Primary email is required</small>
    
      </div>
  <input type="submit" ng-disabled="form.$invalid || !email" />

</form>

ng-required="true" es lo primero que hay que notar. Esto hace que sea necesario completar el formulario de entrada. Luego viene el ng-patrón. La directiva ng-pattern contiene expresiones o patrones que AngularJS verificará para validar una identificación de Email (puede agregar o eliminar valores).

Si el usuario ingresa una dirección de Email que no sigue el formato XYZ, recibiremos un error.

La directiva ng-pattern contiene expresiones o patrones que AngularJS verificará para validar una identificación de Email (puede agregar o eliminar valores).

Finalmente, proporcionemos a los consumidores notificaciones de error en tiempo real para ayudarlos a solucionar cualquier problema con las direcciones de Email proporcionadas.

Agreguemos el elemento div, que ayudará a mostrar condicionalmente advertencias de error a los usuarios. Si el campo de Email contiene problemas, usaremos automáticamente la directiva *ngIf para representar este elemento.

Generemos mensajes de error separados para cada regla que establecimos en el primer paso anterior dentro de la etiqueta div. Usemos el objeto de errores del formulario y la directiva *ngIf para representar los mensajes dinámicamente. Primero veremos si el objeto de errores existe antes de ir a la propiedad needed o pattern.