Validation angulaire des e-mails avec des puces matérielles

Améliorer la saisie des e-mails avec des puces de matériaux angulaires

Implémentation frontend à l'aide d'Angular et 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);
  }
}

Validation des e-mails côté serveur pour les puces de matériaux angulaires

Implémentation backend à l'aide de Node.js et 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'));

Validation des e-mails dans Angular : requêtes courantes

1. Comment valider un e-mail à l'aide de Angular Material Chips ?
2. Utilisez le Validators.pattern avec une expression régulière pour garantir que l'e-mail correspond au format correct avant de l'ajouter en tant que puce.
3. Les Angular Material Chips peuvent-ils gérer plusieurs e-mails ?
4. Oui, les puces peuvent être configurées pour accepter plusieurs e-mails, chacun étant représenté comme une puce distincte dans le champ du formulaire.
5. Quel est le rôle du FormControl dans la gestion des jetons ?
6. FormControl suit la valeur et l'état de validation d'une puce individuelle, facilitant ainsi l'intégration avec les formulaires angulaires.
7. Comment afficher des messages d’erreur avec des emails invalides ?
8. Les messages d'erreur sont affichés dynamiquement à l'aide du dix balise qui réagit à l’état de validation du contrôle de formulaire.
9. Est-il possible de personnaliser l’apparence des puces de matériaux angulaires ?
10. Oui, Angular Material permet de nombreuses options de style et de thème pour personnaliser les puces en fonction des exigences de conception de votre application.

Aperçu final sur l'utilisation d'Angular pour une gestion améliorée des entrées d'e-mails

Les puces matérielles angulaires offrent une solution pratique et visuellement attrayante pour gérer plusieurs entrées de courrier électronique dans un formulaire. En intégrant ces puces aux puissantes fonctionnalités de gestion et de validation des formulaires d'Angular, les développeurs peuvent offrir une expérience utilisateur claire et sans erreur. Cette configuration permet non seulement de réduire les erreurs de saisie des utilisateurs, mais également de présenter ces erreurs de manière intuitive, améliorant ainsi la convivialité globale des applications Web nécessitant une gestion des entrées de courrier électronique.