Cómo utilizar la validación de formularios personalizados en Angular

Introducción

Los validadores se utilizan para garantizar que los valores de un formulario cumplan con determinados requisitos. Están disponibles para formularios basados ​​en plantillas o formularios reactivos en aplicaciones Angular.

Hay varios validadores integrados como required, email, patterny minLength. También es posible desarrollar validadores personalizados para abordar funciones que no se gestionan con un validador integrado.

Por ejemplo, un validador de números de teléfono constaría de un campo de entrada y no se considerará válido a menos que el valor tenga diez dígitos.

Aquí hay una captura de pantalla de un campo de entrada de número de teléfono que proporciona un número no válido de nueve dígitos:

Y aquí hay una captura de pantalla de un campo de entrada de número de teléfono que proporciona un número válido de diez dígitos:

En este tutorial, construirá un validador personalizado para un campo de entrada de número de teléfono en una aplicación Angular.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Algunos conocimientos sobre la configuración de un proyecto Angular .

Este tutorial fue verificado con Node v15.2.1, npmv6.14.8, @angular/corev11.0.0 y @angular/formsv11.0.0.

Configuración del proyecto

Para el propósito de este tutorial, construirás a partir de un proyecto Angular predeterminado generado con @angular/cli.

npx @angular/cli new angular-custom-validation-example --style=css --routing=false --skip-tests

Nota: Alternativamente, puedes instalar globalmente @angular/cli .

Esto configurará un nuevo proyecto Angular con estilos establecidos en “CSS” (a diferencia de “Sass”, Less” o “Stylus”), sin enrutamiento y sin omitir pruebas.

Navegue hasta el directorio del proyecto recién creado:

cd angular-custom-validation-example

En este punto, tendrás un nuevo proyecto Angular.

Uso del validador en un formulario basado en plantillas

Las directivas se utilizan para la validación en formularios basados ​​en plantillas. En este ejemplo, creará una phone-number-validatordirectiva con @angular/cli.

Primero, abra su terminal y use el @angular/clipaquete que se instaló como dependencia de desarrollo para generar una nueva directiva:

./node_modules/@angular/cli/bin/ng generate directive phone-number-validator

Esto creará phone-number-validator.directive.tsy phone-number-validator.directive.spec.ts. También se agregará PhoneNumberValidatorDirectivea app.module.ts.

A continuación, ábrelo phone-number-validator.directive.tsen tu editor de código. Agrega Validator, AbstractControl, y NG_VALIDATORS:

src/app/validador-de-numeros-telefonicos.directive.ts

import { Directive } from '@angular/core';import { AbstractControl, Validator, NG_VALIDATORS } from '@angular/forms';@Directive({  selector: '[appPhoneNumberValidator]',  providers: [{    provide: NG_VALIDATORS,    useExisting: PhoneNumberValidatorDirective,    multi: true  }]})export class PhoneNumberValidatorDirective implements Validator {  validate(control: AbstractControl) : {[key: string]: any} | null {    if (control.value  control.value.length != 10) {      return { 'phoneNumberInvalid': true };    }    return null;  }}

Este código crea una directiva que implementa Validatorof @angular/forms. Necesitará el siguiente método de implementación: validate(control: AbstractControl): : {[key: string]: any} | null. Este validador devolverá un objeto – { 'phoneNumberInvalid': true }– si el valor no cumple la condición de no ser igual a una longitud de diez caracteres. De lo contrario, si el valor cumple la condición, devolverá null.

A continuación, abra su terminal y use el @angular/clipaquete que se instaló como dependencia de desarrollo para generar una nueva directiva:

./node_modules/@angular/cli/bin/ng generate component template-driven-form-example --flat

Este comando creará template-driven-form-example.component.tsy template-driven-form-example.component.htmlagregará archivos TemplateDrivenFormExampleComponenta app.module.ts.

A continuación, abra template-driven-form-example.component.tssu editor de código y agregue phoneun valor inicial de una cadena vacía:

src/app/formulario-controlado-por-plantilla-ejemplo.componente.ts

import { Component } from '@angular/core';@Component({  selector: 'app-template-driven-form-example',  templateUrl: './template-driven-form-example.component.html',  styleUrls: ['./template-driven-form-example.component.css']})export class TemplateDrivenFormExampleComponent {  phone = '';}

Angular agrega el valor de retorno de la función de validación en la errorspropiedad de FormControl/ NgModel. Si la errorspropiedad de FormControl/ NgModelno está vacía, el formulario no es válido. Si la errorspropiedad está vacía, el formulario es válido.

Para utilizar la directiva en un formulario basado en plantillas, abra template-driven-form-example.component.htmly agregue el siguiente código:

src/app/formulario-controlado-por-plantilla-ejemplo.componente.html

div  labelPhone    input      type="text"           name="phone"      [(ngModel)]="phone"      #phoneNgModel="ngModel"      appPhoneNumberValidator      [class.is-invalid]="(phoneNgModel.touched || phoneNgModel.dirty)  phoneNgModel.errors?.phoneNumberInvalid"      /label  span       *ngIf="(phoneNgModel.touched || phoneNgModel.dirty)  phoneNgModel.errors?.phoneNumberInvalid"           Phone number must be 10 digits  /span/div

Este código crea un inputelemento y spancon un mensaje de error. El inputelemento utiliza ngModely el appPhoneNumberValidatorselector para la directiva.

Si se inputha ejecutado touchedo dirtyno se aprueba la validación, ocurrirán dos cosas. En primer lugar, is-invalidse aplicará la clase a input. En segundo lugar, spanse mostrará el mensaje de error.

Nota: Algunas de las clases que aparecen aquí – form-group, form-control, invalid-feedbacky is-valid– son parte del marco Bootstrap. No son necesarias para completar este tutorial, pero pueden aportar estética visual al formulario.

Luego, ábrelo app.module.tsen tu editor de código y agrega FormModule:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { PhoneNumberValidatorDirective } from './phone-number-validator.directive';import { TemplateDrivenFormExampleComponent } from './template-driven-form-example.component';@NgModule({  declarations: [    AppComponent    PhoneNumberValidatorDirective,    TemplateDrivenFormExampleComponent  ],  imports: [    BrowserModule,    FormsModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Por último, abre app.component.htmly reemplaza el contenido con tu TemplateDrivenFormExample:

src/aplicación/aplicación.componente.html

app-template-driven-form-example/app-template-driven-form-example

Puede ejecutar el npm startcomando e interactuar con su entrada en un navegador web. Si ingresa menos de 10 caracteres o más en el campo del teléfono, aparecerá un mensaje de error.

En este punto, tienes un validador personalizado que utiliza una directiva en un formato basado en plantillas.

Uso del validador en formularios reactivos

En lugar de directivas, los formularios reactivos utilizan funciones para la validación.

Primero, abra su terminal y use el @angular/clipaquete que se instaló como dependencia de desarrollo para generar una nueva directiva:

./node_modules/@angular/cli/bin/ng generate component reactive-form-example --flat

Este comando creará reactive-form-example.component.tsy reactive-form-example.component.htmlagregará archivos ReactiveFormExampleComponenta app.module.ts.

A continuación, abra reactive-form-example.component.tssu editor de código y agregue FormBuildery AbstractControl:

src/app/formulario-reactivo-ejemplo.componente.ts

import { Component, OnInit } from "@angular/core";import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';@Component({  selector: 'app-reactive-form-example',  templateUrl: './reactive-form-example.component.html',  styleUrls: ['./reactive-form-example.component.css']})export class ReactiveFormExampleComponent implements OnInit {  myForm: FormGroup;  constructor(private fb: FormBuilder) {}  ngOnInit(): void {    this.myForm = this.fb.group({      phone: ['', [ValidatePhone]]    });  }  saveForm(form: FormGroup) {    console.log('Valid?', form.valid); // true or false    console.log('Phone Number', form.value.phone);  }}function ValidatePhone(control: AbstractControl): {[key: string]: any} | null  {  if (control.value  control.value.length != 10) {    return { 'phoneNumberInvalid': true };  }  return null;}

Este código crea una ValidatePhonefunción y la agrega a la matriz de validadores de FormControl.

Abra reactive-form-example.component.htmlsu editor de código y cree el siguiente formulario:

src/app/ejemplo-de-formulario-reactivo.componente.html

form   novalidate  [formGroup]="myForm"  (ngSubmit)="saveForm(myForm)"  div    div      label        Phone        input          type="text"                   formControlName="phone"          [class.is-invalid]="(myForm.get('phone').touched || myForm.get('phone').dirty)  myForm.get('phone').invalid"              /label      span               *ngIf="(myForm.get('phone').touched || myForm.get('phone').dirty)  myForm.get('phone').invalid"              Phone number must be 10 digits      /span     /div  /div /form

A diferencia del formulario basado en plantillas, este formulario incluye formy utiliza [formGroup], (ngSubmit), formControlNamey get.

Luego, ábrelo app.module.tsen tu editor de código y agrega ReactiveFormsModule:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { PhoneNumberValidatorDirective } from './phone-number-validator.directive';import { ReactiveFormExampleComponent } from './reactive-form-example.component';import { TemplateDrivenFormExampleComponent } from './template-driven-form-example.component';@NgModule({  declarations: [    AppComponent,    PhoneNumberValidatorDirective,    ReactiveFormExampleComponent,    TemplateDrivenFormExampleComponent  ],  imports: [    BrowserModule,    FormsModule,    ReactiveFormsModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Por último, abre app.component.htmly reemplaza el contenido con tu ReactiveFormExample:

src/aplicación/aplicación.componente.html

app-reactive-form-example/app-reactive-form-example

Puede ejecutar el npm startcomando e interactuar con su entrada en un navegador web. Si ingresa menos de 10 caracteres o más en el campo del teléfono, aparecerá un mensaje de error.

En este punto, tienes un validador personalizado que utiliza una función en forma reactiva.

Conclusión

En este artículo, se le presentó cómo agregar validación personalizada para formularios basados ​​en plantillas y formularios reactivos en una aplicación Angular.

La validación personalizada le permite garantizar que los valores proporcionados por los usuarios se ajusten a sus expectativas.

Para una comprensión más profunda de los conceptos de esta publicación, visite esta publicación enProviders y lea sobreAbstractControl .