Validare unghiulară de e-mail cu cipuri de materiale

Îmbunătățirea introducerii de e-mail cu cipuri de material unghiular

Implementare front-end folosind 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);
  }
}

Validare de e-mail pe partea serverului pentru cipurile de material unghiular

Implementarea backend folosind 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'));

Validarea e-mailului în Angular: Interogări comune

1. Cum validezi un e-mail folosind Angular Material Chips?
2. Folosește Validators.pattern cu o expresie regulată pentru a se asigura că e-mailul se potrivește cu formatul corect înainte de a-l adăuga ca cip.
3. Pot Angular Material Chips să gestioneze mai multe e-mailuri?
4. Da, cipurile pot fi configurate să accepte mai multe e-mailuri, fiecare reprezentat ca un cip separat în câmpul formularului.
5. Care este rolul lui FormControl în gestionarea jetoanelor?
6. FormControl urmărește valoarea și starea de validare a unui cip individual, facilitând integrarea cu formularele Angular.
7. Cum pot fi afișate mesajele de eroare cu e-mailuri nevalide?
8. Mesajele de eroare sunt afișate dinamic folosind mat-error etichetă care reacționează la starea de validare a controlului formularului.
9. Este posibil să personalizați aspectul așchiilor de material unghiular?
10. Da, Angular Material permite opțiuni extinse de stilare și tematică pentru a personaliza cipurile în funcție de cerințele de design ale aplicației dvs.

Perspective finale despre utilizarea Angular pentru gestionarea îmbunătățită a intrărilor de e-mail

Angular Material Chips oferă o soluție practică și atrăgătoare din punct de vedere vizual pentru gestionarea mai multor intrări de e-mail într-un formular. Prin integrarea acestor cipuri cu funcțiile puternice de gestionare și validare a formularelor Angular, dezvoltatorii pot oferi o experiență clară, fără erori de utilizare. Această configurare nu numai că ajută la reducerea erorilor de introducere a utilizatorului, ci și la prezentarea acestor erori într-un mod intuitiv, îmbunătățind astfel gradul de utilizare general al aplicațiilor web care necesită gestionarea intrărilor de e-mail.