Tutorial Angular: Formularios en Angular Material

Angular Material proporciona un conjunto de componentes que facilitan la creación de formularios ricos en funcionalidades y con un diseño atractivo.

Esta biblioteca se integra perfectamente con las capacidades de Angular para la validación de formularios y el enlace de datos, lo que proporciona una solución robusta y escalable para construir formularios.

Configuración inicial

Para añadir Angular Material a un proyecto de Angular, se utiliza el siguiente comando:

ng add @angular/material

Importación de módulos

Hay dos formas principales de importar y utilizar los componentes de Angular Material en tu aplicación:

1. Importación tradicional basada en módulos:

Para aplicaciones que utilizan el enfoque basado en módulos, es necesario importar el módulo ReactiveFormsModule o FormsModule de Angular, según el tipo de formulario que se vaya a utilizar (reactivo o basado en plantillas).

Además, hay que importar los módulos de Angular Material que contienen los componentes que se planean usar (como MatInputModule, MatSelectModule, etc.).

// app.module.ts
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatSelectModule,
  ],
})
export class AppModule {}

2. Componentes Standalone:

A partir de Angular 14, se introdujo el concepto de componentes standalone. Estos componentes no necesitan ser declarados en un módulo y pueden importar directamente las dependencias que necesitan. Para usar componentes de Angular Material en un componente standalone, puedes importarlos directamente en el decorador @Component:

// my-standalone.component.ts
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'app-my-standalone',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatSelectModule,
  ],
  template: `
    <!-- Tu plantilla aquí -->
  `,
})
export class MyStandaloneComponent {
  // Lógica del componente
}

Componentes de formulario

Angular Material provee varios componentes relacionados con formularios, tales como:

• matInput: Componente para campos de entrada de texto. Se usa con <input> o <textarea>. Proporciona estilos consistentes con Material Design. Soporta placeholder, etiquetas flotantes y estados de error.
• matCheckbox: Implementa un checkbox estilizado según Material Design. Permite selección múltiple en formularios.
• matRadio: Crea botones de radio para selección única. Se usa típicamente en grupos para opciones mutuamente excluyentes.
• matSelect: Menú desplegable de selección. Soporta opciones únicas y múltiples.
• matSlideToggle: Un interruptor deslizante. Útil para opciones de activación/desactivación. Proporciona una animación suave al cambiar de estado.
• matDatepicker: Ofrece un selector de fecha interactivo. Soporta múltiples formatos de fecha y hora. Incluye navegación por meses y años.
• matAutocomplete: Proporciona sugerencias de autocompletado para campos de entrada. Permite filtrar y seleccionar de una lista de opciones.

Uso de matInput

Para usar el componente matInput, primero es necesario importar el módulo MatInputModule en el módulo o componente standalone donde se va a usar el formulario.

import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [MatInputModule]
})
export class AppModule {}

Luego, en el componente, se puede usar el matInput de la siguiente manera:

<mat-form-field>
  <mat-label>Nombre(s)</mat-label>
  <input matInput type="text" formControlName="name">
</mat-form-field>

<mat-form-field>
  <mat-label>Apellidos</mat-label>
  <input matInput type="text" formControlName="lastname">

</mat-form-field>

Como se vería en el navegador:

Uso de matCheckbox

Para el componente matCheckbox, se debe importar MatCheckboxModule.

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  imports: [MatCheckboxModule]
})
export class AppModule {}

Después, en la plantilla:

<mat-checkbox formControlName="isCompany">¿Eres una empresa?</mat-checkbox>

Así se vería el mat-checkbox integrado en un formulario de registro:

Uso de matRadio

Similar al checkbox, para los radios primero se importa MatRadioModule.

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [MatRadioModule]
})
export class AppModule {}

En la plantilla:

<label> Género </label>
<mat-radio-group formControlName="gender">
   <mat-radio-button value="M">M</mat-radio-button>
   <mat-radio-button value="F">F</mat-radio-button>
</mat-radio-group>

El ejemplo anterior se vería de la siguiente manera en el navegador en un formulario más completo:

Uso de matSelect

Para el componente matSelect, se importa MatSelectModule.

import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [MatSelectModule]
})
export class AppModule {}

Y en el componente HTML:

<mat-form-field>
  <mat-label>Comunidad Autónoma</mat-label>
  <mat-select formControlName="state">
    <mat-option>None</mat-option>
    @for (state of states; track state) {
      <mat-option [value]="state">{{state}}</mat-option>
    }
  </mat-select>
</mat-form-field>

matSelect incorporado al formulario:

Tipos de formularios

Angular Material es compatible con los dos tipos de formularios en Angular: reactivos y basados en plantillas.

Formularios reactivos

Los formularios reactivos son más flexibles y escalables. Se crean completamente en la lógica del componente utilizando la clase FormGroup.

Por ejemplo, un simple formulario reactivo con un campo de texto para ingresar un nombre podría verse de la siguiente manera:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="profileForm">
      <mat-form-field>
        <mat-label>Nombre</mat-label>
        <input matInput formControlName="name">
      </mat-form-field>
    </form>
  `,
})
export class ReactiveFormComponent {
  profileForm = new FormGroup({
    name: new FormControl(''),
  });
}

En este ejemplo, en la plantilla HTML, se utilizan <mat-form-field>, <mat-label> y <input matInput> para crear un campo de texto con el estilo de Angular Material.

Formularios basados en plantillas

En el caso de los formularios basados en plantillas, la definición del formulario se realiza principalmente en la plantilla HTML utilizando directivas específicas de Angular.

Por ejemplo:

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-form',
  template: `
    <form>
      <mat-form-field>
        <mat-label>Nombre</mat-label>
        <input matInput [(ngModel)]="name" name="name">     
      </mat-form-field>
    </form>
  `,
})
export class TemplateFormComponent {
  name = '';
}

Validación de formularios

Angular Material funciona bien con las validaciones de Angular.

Para añadir una validación a un campo, se pueden utilizar los validadores predefinidos en el módulo Validators de Angular.

Por ejemplo, para hacer que un campo sea obligatorio en un formulario reactivo:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-form-example',
    template: `
    <form [formGroup]="profileForm">
      <mat-form-field>
        <mat-label>Nombre(s)</mat-label>
        <input matInput formControlName="name">
        @if (profileForm.get('name')?.hasError('required')) {
          <mat-error>El nombre es obligatorio</mat-error>
        }
      </mat-form-field>
      <button mat-raised-button color="primary" (click)="submitForm()">Enviar</button>
    </form>
  `,
})
export class FormExampleComponent {
    profileForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.profileForm = this.fb.group({
            name: ['', Validators.required],
        });
    }

    submitForm() {
        if (this.profileForm.valid) {
            console.log('Formulario válido', this.profileForm.value);
        } else {
            console.log('Formulario inválido');
        }
    }
}

En este ejemplo, se utiliza Validators.required para hacer que el campo sea obligatorio. Luego, en la plantilla, se utiliza @if para mostrar un mensaje de error en la interfaz de usuario cuando el campo no cumple con la validación, en este caso, cuando el campo está vacío.

El input anterior en el navegador cuando no se cumplen las validaciones:

Estilos y temas

Angular Material proporciona un sistema de temas flexible que permite personalizar fácilmente el aspecto de los componentes. Puedes definir colores personalizados, tipografía y más en tu archivo de estilos global:

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@include mat.all-component-themes($my-theme);

Accesibilidad

Angular Material está diseñado con la accesibilidad en mente. Los componentes incluyen atributos ARIA y soporte para navegación por teclado. Sin embargo, es importante seguir las mejores prácticas de accesibilidad al implementar tus formularios.