Cómo crear un validador personalizado para formularios reactivos en Angular

Introducción

El paquete de Angular @angular/formsincluye una Validatorsclase que admite validadores integrados útiles como required, minLength, maxLengthy pattern. Sin embargo, puede haber campos de formulario que requieran reglas más complejas o personalizadas para la validación. En esas situaciones, puede utilizar un validador personalizado.

Al usar formularios reactivos en Angular, se definen validadores personalizados con funciones. Si no es necesario reutilizar el validador, puede existir como una función en un archivo de componente directamente. De lo contrario, si es necesario reutilizar el validador en otros componentes, puede existir en un archivo separado.

En este tutorial, construirá un formulario reactivo con un validador personalizado reutilizable para verificar si una URL cumple ciertas condiciones.

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.

Paso 1 – 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-reactive-forms-custom-validtor-example --style=css --routing=false --skip-tests

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-reactive-forms-custom-validator-example

Para trabajar con formularios reactivos, utilizarás ReactiveFormsModuleen lugar de FormsModule.

Á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 { ReactiveFormsModule } from '@angular/forms';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    ReactiveFormsModule,  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

En este punto, deberías tener un nuevo proyecto Angular con ReactiveFormsModule.

Paso 2: creación de un validador personalizado

El validador personalizado de ejemplo para este tutorial tomará una cadena URL y garantizará que comience con el httpsprotocolo y termine con el .iodominio de nivel superior.

Primero, en tu terminal, crea un shareddirectorio:

mkdir src/shared

Luego, en este nuevo directorio, crea un nuevo url.validator.tsarchivo. Ábrelo en tu editor de código y agrega las siguientes líneas de código:

src/shared/url.validator.ts

import { AbstractControl } from '@angular/forms';export function ValidateUrl(control: AbstractControl) {  if (!control.value.startsWith('https') || !control.value.includes('.io')) {    return { invalidUrl: true };  }  return null;}

Este código utiliza la AbstractControlclase Notice, que es la clase base para FormControls, FormGroups y FormArrays. Esto permite acceder al valor de FormControl.

Este código comprobará si el valor de startsWithla cadena de caracteres es https. También comprobará si el valor includesde la cadena de caracteres es .io.

Si la validación falla, devolverá un objeto con una clave para el nombre del error, invalidUrl, y un valor de true.

De lo contrario, si la validación pasa, devolverá null.

En este punto, su validador personalizado está listo para usarse.

Paso 3 – Uso del validador personalizado

A continuación, cree un formulario que acepte a userNamey a websiteUrl.

Abra app.component.tsy reemplace el contenido con las siguientes líneas de código:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';import { ValidateUrl } from '../shared/url.validator';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  myForm: FormGroup;  constructor(private fb: FormBuilder) {}  ngOnInit() {    this.myForm = this.fb.group({      userName: ['', Validators.required],      websiteUrl: ['', [Validators.required, ValidateUrl]]    });  }  saveForm(form: FormGroup) {    console.log('Valid?', form.valid); // true or false    console.log('Username', form.value.userName);    console.log('Website URL', form.value.websiteUrl);  }}

En este código, el websiteUrlcontrol de formulario utiliza tanto el validador integrado Validators.requiredcomo el personalizado ValidateUrl.

Paso 4 – Acceder a los errores en la plantilla

Los usuarios que interactúan con su formulario necesitarán recibir comentarios sobre qué valores no superan la validación. En la plantilla de componente, puede utilizar la clave que definió en el valor de retorno de un validador personalizado.

Abra app.component.htmly reemplace el contenido con las siguientes líneas de código:

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

form [formGroup]="myForm" ngSubmit)="saveForm(myForm)"  div    label      Username:      input formControlName="userName" placeholder="Your username"    /label    div *ngIf="(                 myForm.get('userName').dirty ||                 myForm.get('userName').touched                )                 myForm.get('userName').invalid"          Please provide your username.    /div  /div  div    label      Website URL:      input formControlName="websiteUrl" placeholder="Your website"    /label    div      *ngIf="(              myForm.get('websiteUrl').dirty ||              myForm.get('websiteUrl').touched             )              myForm.get('websiteUrl').invalid"            Only URLs served over HTTPS and from the .io top-level domain are accepted.    /div  /div/form

En este punto, puedes compilar tu aplicación:

npm start

Y ábralo en su navegador web. Puede interactuar con los campos de userNamey websiteUrl. Asegúrese de que su validador personalizado para ValidateUrlfuncione como se espera con un valor que cumpla las condiciones de httpsy .io: https://example.io.

Conclusión

En este artículo, creó un validador personalizado reutilizable para un formulario reactivo en una aplicación Angular.

Para obtener ejemplos de validadores personalizados en formularios basados ​​en plantillas y formularios reactivos, consulte Validación de formularios personalizados en Angular .

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.