Uhlová e-mailová validácia s materiálovými čipmi

Vylepšenie zadávania e-mailov pomocou hranatých materiálových čipov

Implementácia frontendu pomocou Angular a 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);
  }
}

Overenie e-mailu na strane servera pre uhlové materiálové čipy

Implementácia backendu pomocou Node.js a 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'));

Overenie e-mailu v Angular: Bežné dotazy

1. Ako overíte e-mail pomocou čipov Angular Material Chips?
2. Použi Validators.pattern s regulárnym výrazom, aby sa zabezpečilo, že e-mail bude zodpovedať správnemu formátu pred jeho pridaním ako čipu.
3. Môžu čipy Angular Material Chips spracovať viacero e-mailov?
4. Áno, čipy možno nakonfigurovať tak, aby prijímali viacero e-mailov, pričom každý z nich je reprezentovaný ako samostatný čip v poli formulára.
5. Aká je úloha FormControl pri spravovaní čipov?
6. FormControl sleduje hodnotu a stav overenia jednotlivého čipu, čím uľahčuje integráciu s Angular formami.
7. Ako sa môžu zobraziť chybové hlásenia s neplatnými e-mailami?
8. Chybové hlásenia sa dynamicky zobrazujú pomocou mat-error tag, ktorý reaguje na stav overenia ovládacieho prvku formulára.
9. Je možné prispôsobiť vzhľad hranatých materiálových čipov?
10. Áno, hranatý materiál umožňuje rozsiahle možnosti štýlu a tematického prispôsobenia čipov podľa požiadaviek na dizajn vašej aplikácie.

Záverečné informácie o používaní Angular pre vylepšenú správu e-mailových vstupov

Čipy Angular Material Chips ponúkajú praktické a vizuálne príťažlivé riešenie na správu viacerých e-mailových vstupov vo formulári. Integráciou týchto čipov s výkonnými funkciami spracovania formulárov a overovania Angular môžu vývojári poskytnúť jasné a bezchybné používateľské prostredie. Toto nastavenie pomáha nielen pri znižovaní chýb pri vstupe používateľa, ale aj pri prezentovaní týchto chýb intuitívnym spôsobom, čím sa zlepšuje celková použiteľnosť webových aplikácií, ktoré vyžadujú správu zadávania e-mailov.