Vinkel e-postvalidering med materialchips

Förbättra e-postinmatning med kantiga materialchips

Frontend-implementering med Angular och 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-postvalidering på serversidan för kantiga materialchips

Backend-implementering med Node.js och 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-postvalidering i Angular: Vanliga frågor

1. Hur validerar du ett e-postmeddelande med Angular Material Chips?
2. Använd Validators.pattern med ett reguljärt uttryck för att säkerställa att e-postmeddelandet matchar rätt format innan du lägger till det som ett chip.
3. Kan Angular Material Chips hantera flera e-postmeddelanden?
4. Ja, chipsen kan konfigureras för att acceptera flera e-postmeddelanden, var och en representerad som ett separat chip i formulärfältet.
5. Vad är rollen för FormControl i att hantera chips?
6. FormControl spårar värdet och valideringsstatusen för ett enskilt chip, vilket underlättar integrationen med Angular-formulär.
7. Hur kan felmeddelanden visas med ogiltiga e-postmeddelanden?
8. Felmeddelanden visas dynamiskt med hjälp av mat-error tagg som reagerar på valideringsstatusen för formulärkontrollen.
9. Är det möjligt att anpassa utseendet på Angular Material Chips?
10. Ja, Angular Material möjliggör omfattande styling- och temaalternativ för att anpassa chips enligt din applikations designkrav.

Slutliga insikter om att använda Angular för förbättrad hantering av e-postinmatning

Angular Material Chips erbjuder en praktisk och visuellt tilltalande lösning för att hantera flera e-postingångar i ett formulär. Genom att integrera dessa chips med Angulars kraftfulla formulärhanterings- och valideringsfunktioner kan utvecklare ge en tydlig, felfri användarupplevelse. Denna inställning hjälper inte bara till att minska användarinmatningsfel utan också att presentera dessa fel på ett intuitivt sätt, vilket förbättrar den övergripande användbarheten av webbapplikationer som kräver e-posthantering.