Validación de correo electrónico angular con chips de material

Mejora de la entrada de correo electrónico con chips de material angular

Implementación de frontend usando Angular y TypeScript

import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validators } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
const REGEXP_EMAIL = /^(([^<>()[\\].,;:\\s@"]+(\\.[^<>()[\\].,;:\\s@"]+)*)|(".+"))@(([^<>()[\\].,;:\\s@"]+\\.)+[^<>()[\\].,;:\\s@"]{2,})$/i;
export function emailsArrayValidator(control: FormControl) {
  const emails: string[] = Array.isArray(control.value) ? control.value : [];
  const invalidEmails = emails.filter(email => !REGEXP_EMAIL.test(email.trim()));
  return invalidEmails.length === 0 ? null : { invalidEmails: true };
}
@Component({
  selector: 'app-invite-form',
  templateUrl: './invite-form.component.html',
})
export class InviteFormComponent {
  inviteForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.pattern(REGEXP_EMAIL)]],
    friends: [[], [Validators.required, Validators.minLength(1), emailsArrayValidator]],
  });
  constructor(private fb: FormBuilder) {}
  addFriend(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    if ((value || '').trim()) {
      const friends = [...this.inviteForm.value.friends, value.trim()];
      this.inviteForm.controls['friends'].setValue(friends);
      if (input) {
        input.value = '';
      }
    }
  }
  removeFriend(friend: string): void {
    const friends = this.inviteForm.value.friends.filter((f: string) => f !== friend);
    this.inviteForm.controls['friends'].setValue(friends);
  }
}

Validación de correo electrónico del lado del servidor para chips de material angular

Implementación de backend usando Node.js y Express

const express = require('express');
const router = express.Router();
const { body, validationResult } = require('express-validator');
router.post('/validate-emails', [
  body('emails').isArray(),
  body('emails.*').isEmail()],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(422).json({ errors: errors.array() });
    }
    res.send('Emails are valid');
});
const app = express();
app.use(express.json());
app.use('/api', router);
app.listen(3000, () => console.log('Server running on port 3000'));

Validación de correo electrónico en Angular: consultas comunes

1. ¿Cómo se valida un correo electrónico utilizando Angular Material Chips?
2. Utilizar el Validators.pattern con una expresión regular para garantizar que el correo electrónico coincida con el formato correcto antes de agregarlo como chip.
3. ¿Puede Angular Material Chips manejar varios correos electrónicos?
4. Sí, los chips se pueden configurar para aceptar múltiples correos electrónicos, cada uno representado como un chip separado dentro del campo del formulario.
5. ¿Cuál es el papel del FormControl en el manejo de chips?
6. FormControl rastrea el valor y el estado de validación de un chip individual, facilitando la integración con formularios Angular.
7. ¿Cómo se pueden mostrar mensajes de error con correos electrónicos no válidos?
8. Los mensajes de error se muestran dinámicamente usando el mat-error Etiqueta que reacciona al estado de validación del control del formulario.
9. ¿Es posible personalizar la apariencia de Angular Material Chips?
10. Sí, Angular Material permite amplias opciones de estilo y temática para personalizar los chips de acuerdo con los requisitos de diseño de su aplicación.

Información final sobre el uso de Angular para mejorar la gestión de entrada de correo electrónico

Angular Material Chips ofrece una solución práctica y visualmente atractiva para gestionar múltiples entradas de correo electrónico en un formulario. Al integrar estos chips con las poderosas funciones de validación y manejo de formularios de Angular, los desarrolladores pueden brindar una experiencia de usuario clara y sin errores. Esta configuración no solo ayuda a reducir los errores de entrada del usuario, sino también a presentar esos errores de forma intuitiva, mejorando así la usabilidad general de las aplicaciones web que requieren gestión de entrada de correo electrónico.