Kantet e-mail-validering med materialechips

Forbedring af e-mail-input med kantede materialechips

Frontend-implementering ved hjælp af Angular og 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);
  }
}

Server-side e-mail-validering for kantede materialechips

Backend-implementering ved hjælp af Node.js og 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-mail-validering i Angular: Almindelige forespørgsler

1. Hvordan validerer du en e-mail ved hjælp af Angular Material Chips?
2. Brug Validators.pattern med et regulært udtryk for at sikre, at e-mailen matcher det korrekte format, før den tilføjes som en chip.
3. Kan Angular Material Chips håndtere flere e-mails?
4. Ja, chipsene kan konfigureres til at acceptere flere e-mails, hver repræsenteret som en separat chip i formularfeltet.
5. Hvad er rollen for FormControl i håndtering af chips?
6. FormControl sporer værdien og valideringsstatus for en individuel chip, hvilket letter integrationen med Angular-formularer.
7. Hvordan kan fejlmeddelelser vises med ugyldige e-mails?
8. Fejlmeddelelser vises dynamisk ved hjælp af mat-error tag, der reagerer på valideringsstatus for formularkontrolelementet.
9. Er det muligt at tilpasse udseendet af Angular Material Chips?
10. Ja, Angular Material giver mulighed for omfattende styling- og temaindstillinger for at tilpasse chips i henhold til din applikations designkrav.

Endelig indsigt i brug af Angular til forbedret e-mail-inputstyring

Angular Material Chips tilbyder en praktisk og visuelt tiltalende løsning til håndtering af flere e-mail-input i en form. Ved at integrere disse chips med Angulars kraftfulde formularhåndterings- og valideringsfunktioner kan udviklere give en klar, fejlfri brugeroplevelse. Denne opsætning hjælper ikke kun med at reducere brugerinputfejl, men også med at præsentere disse fejl på en intuitiv måde, hvilket forbedrer den overordnede anvendelighed af webapplikationer, der kræver e-mail-inputstyring.