Szögletes e-mail-ellenőrzés anyagchipekkel

Az e-mail bevitel javítása szögletes anyagchipekkel

Frontend implementáció Angular és TypeScript használatával

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);
  }
}

Szerveroldali e-mail-ellenőrzés a szögletes anyagchipekhez

Háttérrendszer megvalósítása Node.js és Express használatával

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 ellenőrzés szögben: gyakori lekérdezések

1. Hogyan érvényesíthet egy e-mailt az Angular Material Chips segítségével?
2. Használja a Validators.pattern reguláris kifejezéssel, hogy biztosítsa az e-mail megfelelő formátumát, mielőtt chipként adná hozzá.
3. Az Angular Material Chips képes több e-mailt is kezelni?
4. Igen, a chipek konfigurálhatók több e-mail fogadására, amelyek mindegyike külön chipként jelenik meg az űrlapmezőben.
5. Mi a szerepe a FormControl a chipek kezelésében?
6. FormControl nyomon követi egy egyedi chip értékét és érvényesítési állapotát, megkönnyítve az integrációt az Angular formákkal.
7. Hogyan jeleníthetők meg a hibaüzenetek érvénytelen e-mailekkel?
8. A hibaüzenetek dinamikusan jelennek meg a mat-error címke, amely reagál az űrlapvezérlő érvényesítési állapotára.
9. Testreszabható az Angular Material Chips megjelenése?
10. Igen, az Angular Material kiterjedt stílus- és tematikus lehetőségeket tesz lehetővé a chipek testreszabásához az alkalmazás tervezési követelményei szerint.

Utolsó betekintés az Angular használatához a továbbfejlesztett e-mail-bevitel kezeléséhez

Az Angular Material Chips praktikus és tetszetős megoldást kínál több e-mail bevitel kezelésére egy űrlapon. Azáltal, hogy ezeket a chipeket az Angular hatékony űrlapkezelő és érvényesítő funkcióival integrálják, a fejlesztők egyértelmű, hibamentes felhasználói élményt nyújthatnak. Ez a beállítás nemcsak a felhasználói beviteli hibák csökkentését segíti elő, hanem a hibák intuitív módon történő bemutatását is, így javítva az e-mail-bevitel kezelését igénylő webalkalmazások általános használhatóságát.