Hoekige e-mailvalidatie met materiaalchips

Verbetering van de e-mailinvoer met hoekige materiaalchips

Frontend-implementatie met behulp van Angular en 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);
  }
}

E-mailvalidatie aan serverzijde voor hoekige materiaalchips

Backend-implementatie met behulp van Node.js en 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'));

E-mailvalidatie in Angular: veelvoorkomende zoekopdrachten

1. Hoe valideer je een e-mail met Angular Material Chips?
2. Gebruik de Validators.pattern met een reguliere expressie om ervoor te zorgen dat de e-mail overeenkomt met het juiste formaat voordat deze als chip wordt toegevoegd.
3. Kunnen Angular Material Chips meerdere e-mails verwerken?
4. Ja, de chips kunnen worden geconfigureerd om meerdere e-mails te accepteren, elk weergegeven als een afzonderlijke chip in het formulierveld.
5. Wat is de rol van de FormControl bij het beheren van chips?
6. FormControl volgt de waarde en validatiestatus van een individuele chip, waardoor de integratie met Angular-formulieren wordt vergemakkelijkt.
7. Hoe kunnen foutmeldingen worden weergegeven bij ongeldige e-mails?
8. Foutmeldingen worden dynamisch weergegeven met behulp van de mat-error tag die reageert op de validatiestatus van het formulierbesturingselement.
9. Is het mogelijk om het uiterlijk van Angular Material Chips aan te passen?
10. Ja, Angular Material biedt uitgebreide styling- en thema-opties om chips aan te passen aan de ontwerpvereisten van uw toepassing.

Laatste inzichten over het gebruik van Angular voor verbeterd beheer van e-mailinvoer

Angular Material Chips bieden een praktische en visueel aantrekkelijke oplossing voor het beheren van meerdere e-mailinvoer in een formulier. Door deze chips te integreren met de krachtige formulierverwerkings- en validatiefuncties van Angular kunnen ontwikkelaars een duidelijke, foutloze gebruikerservaring bieden. Deze opzet helpt niet alleen bij het verminderen van gebruikersinvoerfouten, maar ook bij het op een intuïtieve manier presenteren van deze fouten, waardoor de algehele bruikbaarheid wordt verbeterd van webapplicaties waarvoor e-mailinvoerbeheer vereist is.