Cómo utilizar formularios reactivos en Angular

Introducción

Angular ofrece dos formas de trabajar con formularios: formularios basados ​​en plantillas y formularios reactivos (también conocidos como formularios basados ​​en modelos ). Los formularios basados ​​en plantillas son la forma predeterminada de trabajar con formularios en Angular. Con los formularios basados ​​en plantillas, se utilizan directivas de plantilla para crear una representación interna del formulario. Con los formularios reactivos, creas tu propia representación de un formulario en la clase del componente.

Nota: Las formas reactivas se introdujeron con Angular 2.

Estas son algunas de las ventajas de las formas reactivas:

• Uso de validadores personalizados
• Cambiar la validación dinámicamente
• Adición dinámica de campos de formulario

En este artículo, explorará cómo se pueden aplicar formularios reactivos a una aplicación Angular de ejemplo.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .

Esta publicación asume que tienes algunos conocimientos básicos de Angular.

Esta publicación también asume que estás creando a partir de un proyecto Angular nuevo generado por @angular/cli. Puedes consultar esta publicación si estás comenzando a usar Angular CLI.

Este tutorial fue verificado con Node v15.1.0, 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-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-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: Agregar un formulario a la plantilla del componente

Con formas reactivas, la lógica se declara completamente en la clase del componente.

Ábrelo app.component.htmlen tu editor de código y agrega las siguientes líneas de código:

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

form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)"  div    label      Name:      input formControlName="name" placeholder="Your name"    /label  /div  div    label      Email:      input formControlName="email" placeholder="Your email"    /label  /div  div    label      Message:      input formControlName="message" placeholder="Your message"    /label  /div  button type="submit"Send/button/form

Este código creará un formulario con tres campos: name, email, y message. También habrá un "submit"botón con la etiqueta "Send". Al enviar el formulario, onSubmit(myForm)se llamará al método.

Nota: si utiliza Angular 2.x, también debe agregar la novalidatedirectiva con la formetiqueta de apertura, ya que Angular anula la validación de HTML5. Con Angular 4+, novalidatese agrega automáticamente en segundo plano.

Vamos a desglosarlo:

• formGroup:El formulario será tratado como una FormGroupclase en el componente, por lo que la formGroupdirectiva permite dar un nombre al grupo de formularios.
• ngSubmit:Este es el evento que se activará al enviar el formulario.
• formControlName:Cada campo de formulario debe tener una formControlNamedirectiva con un valor que será el nombre utilizado en la clase del componente.

En este punto, deberías tener un nuevo proyecto Angular con una plantilla de componente que usa un formulario.

Paso 3: creación de la clase de componente

A continuación, en la clase de componente, definirá los s FormGroupindividuales y FormControldentro del FormGroup.

Si se proporciona un valor al crear un FormControl, se utilizará como valor inicial para el campo.

Observe cómo los nombres FormGroupy FormControlson los mismos que se usaron en la plantilla. Observe también cómo inicializa FormGroupen el ngOnInit gancho de ciclo de vida :

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import { FormControl, FormGroup } from '@angular/forms';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  myForm: FormGroup;  ngOnInit() {    this.myForm = new FormGroup({      name: new FormControl('Sammy'),      email: new FormControl(''),      message: new FormControl('')    });  }  onSubmit(form: FormGroup) {    console.log('Valid?', form.valid); // true or false    console.log('Name', form.value.name);    console.log('Email', form.value.email);    console.log('Message', form.value.message);  }}

A los efectos de este tutorial, el onSubmitmétodo no comunica los valores del formulario enviado a ningún servicio o servidor externo. Sirve para mostrar cómo se puede acceder a la validez y FormControllos valores del formulario.

En este punto, puede compilar su aplicación y abrirla en un navegador web. Después de ingresar los valores para name, email, y messagey presionar Enviar , el registro de la consola mostrará los valores.

Paso 4: Actualización de la clase de componente a utilizarFormBuilder

La ngOnInitconstrucción del formulario se puede reescribir con el FormBuilderasistente. Esto le permite prescindir de todos los cambios en los grupos de formularios y controles de formularios.

Vuelva app.component.tsa visitar su editor de código y elimine FormControly reemplace FormGroupcon FormBuilder:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup } from '@angular/forms';@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({      name: 'Sammy',      email: '',      message: ''    });  }  onSubmit(form: FormGroup) {    console.log('Valid?', form.valid); // true or false    console.log('Name', form.value.name);    console.log('Email', form.value.email);    console.log('Message', form.value.message);  }}

Este código FormBuilderreduce la cantidad de código repetitivo para crear un FormGroup.

Paso 5: Actualización de la clase de componente a utilizarValidators

Agregue la Validatorsclase a sus importaciones y declare sus controles de formulario con matrices en lugar de simples valores de cadena.

El primer valor de la matriz es el valor inicial del formulario y el segundo valor es para que lo utilicen los validadores. Observe cómo se pueden utilizar varios validadores en el mismo control de formulario al incluirlos en una matriz.

RevisaRevisa app.component.tsen tu editor de código y agrega Validators:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';@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({      name: ['Sammy', Validators.required],      email: ['', [Validators.required, Validators.email]],      message: ['', [Validators.required, Validators.minLength(15)]],    });  }  onSubmit(form: FormGroup) {    console.log('Valid?', form.valid); // true or false    console.log('Name', form.value.name);    console.log('Email', form.value.email);    console.log('Message', form.value.message);  }}

Este código se agrega requireda los campos name, emaily message. También garantiza que el emailvalor utilice el formato de una dirección de correo electrónico válida. También garantiza que el messagevalor tenga al menos 15 caracteres.

Si no se cumple alguno de estos requisitos de formulario, el validvalor será false. Si se cumplen todos estos requisitos de formulario, el validvalor será true.

Paso 6: Acceso al valor del formulario y a la validez de la plantilla

En la plantilla, puede acceder FormControlal valor y la validez de cada uno y al valor y la validez de todo el grupo de formularios en su conjunto.

Revise app.component.htmly use *ngIfpara mostrar mensajes de comentarios al usuario si los valores del formulario no son válidos:

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

form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)"  div    label      Name:      input formControlName="name" placeholder="Your name"    /label    div *ngIf="myForm.get('name').invalid  (myForm.get('name').dirty || myForm.get('name').touched)"      Please provide a name.    /div  /div  div    label      Email:      input formControlName="email" placeholder="Your email"    /label    div *ngIf="myForm.get('email').invalid  (myForm.get('email').dirty || myForm.get('email').touched)"      Please provide a valid email address.    /div  /div  div    label      Message:      input formControlName="message" placeholder="Your message"    /label    div *ngIf="myForm.get('message').invalid  (myForm.get('message').dirty || myForm.get('message').touched)"      Messages must be at least 15 characters long.    /div  /div  button type="submit" [disabled]="myForm.invalid"Send/button/form

Este código verifica si el usuario ha interactuado con el campo ( dirtyo touched). Luego, si el valor no cumple con los requisitos de validación, mostrará el mensaje de error. El botón Enviar también se desactivará hasta que se resuelvan todos los problemas con los valores del formulario.

Existen varias formas de recuperar valores de control de formulario. En este ejemplo se utiliza myForm.get('name')que es equivalente a myForm.controls.name. Es posible recuperar información de error con .hasError('required')o .errors.required.

Conclusión

En este artículo, exploró cómo se pueden aplicar los formularios reactivos a una aplicación Angular de ejemplo. Usó FormControl, FormGroup, FormBuildery Validatorspara construir un formulario de ejemplo con validación. Para obtener más funciones, consulte la documentación oficial .

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.