Búsqueda de sitios web

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

Introducción

El paquete @angular/forms de Angular viene con una clase Validators que admite útiles validadores incorporados como required, minLength , maxLength y patrón. Sin embargo, puede haber campos de formulario que requieran reglas más complejas o personalizadas para la validación. En esas situaciones, puede usar un validador personalizado.

Al usar formularios reactivos en Angular, define 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 el validador debe reutilizarse 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 con ciertas condiciones.

requisitos previos

Para completar este tutorial, necesitará:

  • Node.js instalado localmente, lo que puede hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local.
  • Algo de familiaridad con la configuración de un proyecto Angular.

Este tutorial se verificó con Node v15.2.1, npm v6.14.8, @angular/core v11.0.0 y @angular/forms v11 .0.0.

Paso 1: configuración del proyecto

A los efectos de este tutorial, compilará a partir de un proyecto Angular predeterminado generado con @angular/cli.

  1. 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 pruebas de omisión.

Navegue al directorio del proyecto recién creado:

  1. cd angular-reactive-forms-custom-validator-example

Para trabajar con formularios reactivos, utilizará el ReactiveFormsModule en lugar del FormsModule.

Abra app.module.ts en su editor de código y agregue ReactiveFormsModule:

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ía 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 de URL y se asegurará de que comience con el protocolo https y finalice con el dominio de nivel superior .io.

Primero, en su terminal, cree un directorio shared:

  1. mkdir src/shared

Luego, en este nuevo directorio, cree un nuevo archivo url.validator.ts. Abra este archivo en su editor de código y agregue las siguientes líneas de código:

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 usa la clase Notice AbstractControl, que es la clase base para FormControls, FormGroups y FormArray s. Esto permite acceder al valor del FormControl.

Este código verificará si el valor comienza con la cadena de caracteres para https. También verificará si el valor incluye la cadena de caracteres para .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 pasa la validación, devolverá null.

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

Paso 3: uso del validador personalizado

A continuación, cree un formulario que tome un userName y un websiteUrl.

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

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 control de formulario websiteUrl utiliza tanto el Validators.required integrado como el validador ValidateUrl personalizado.

Paso 4: acceder a los errores en la plantilla

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

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

<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, puede compilar su aplicación:

  1. npm start

Y ábrelo en tu navegador web. Puede interactuar con los campos para userName y websiteUrl. Asegúrese de que su validador personalizado para ValidateUrl funcione como se espera con un valor que debe cumplir las condiciones de https y .io: https: //ejemplo.io.

Conclusión

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

Para ver 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.

Artículos relacionados: