Validació de correu electrònic angular amb xips de material

Millora de l'entrada de correu electrònic amb xips de material angular

Implementació de front-end mitjançant Angular i 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ó de correu electrònic del costat del servidor per a xips de material angular

Implementació de backend mitjançant Node.js i 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ó de correu electrònic a Angular: consultes habituals

1. Com valideu un correu electrònic amb Angular Material Chips?
2. Utilitzar el Validators.pattern amb una expressió regular per assegurar-se que el correu electrònic coincideix amb el format correcte abans d'afegir-lo com a xip.
3. Els xips de material angular poden gestionar diversos correus electrònics?
4. Sí, els xips es poden configurar per acceptar diversos correus electrònics, cadascun representat com un xip independent dins del camp del formulari.
5. Quin és el paper del FormControl en la gestió de fitxes?
6. FormControl rastreja el valor i l'estat de validació d'un xip individual, facilitant la integració amb els formularis angulars.
7. Com es poden mostrar missatges d'error amb correus electrònics no vàlids?
8. Els missatges d'error es mostren de manera dinàmica mitjançant el mat-error etiqueta que reacciona a l'estat de validació del control del formulari.
9. És possible personalitzar l'aspecte dels xips de material angular?
10. Sí, Angular Material permet una àmplia varietat d'opcions d'estil i temàtica per personalitzar els xips segons els requisits de disseny de la vostra aplicació.

Informació final sobre l'ús d'Angular per a una gestió millorada de l'entrada de correu electrònic

Els xips de material angular ofereixen una solució pràctica i visualment atractiva per gestionar diverses entrades de correu electrònic en un formulari. En integrar aquests xips amb les potents funcions de validació i manipulació de formularis d'Angular, els desenvolupadors poden oferir una experiència d'usuari clara i sense errors. Aquesta configuració no només ajuda a reduir els errors d'entrada de l'usuari, sinó també a presentar aquests errors d'una manera intuïtiva, millorant així la usabilitat general de les aplicacions web que requereixen una gestió d'entrada de correu electrònic.