Úhlové ověření e-mailu pomocí materiálových čipů

Vylepšení zadávání e-mailů pomocí hranatých materiálových čipů

Implementace frontendu pomocí 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);
  }
}

E-mailová validace na straně serveru pro úhlové materiálové čipy

Implementace backendu pomocí 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'));

Ověření e-mailu v Angular: Běžné dotazy

1. Jak ověříte e-mail pomocí čipů Angular Material Chips?
2. Použijte Validators.pattern s regulárním výrazem, aby se zajistilo, že e-mail odpovídá správnému formátu, než jej přidáte jako čip.
3. Mohou Angular Material Chips zpracovat více e-mailů?
4. Ano, čipy lze nakonfigurovat tak, aby přijímaly více e-mailů, každý reprezentovaný jako samostatný čip v poli formuláře.
5. Jaká je role FormControl při správě čipů?
6. FormControl sleduje hodnotu a stav ověření jednotlivého čipu, což usnadňuje integraci s Angular formami.
7. Jak lze zobrazit chybové zprávy s neplatnými e-maily?
8. Chybové zprávy se dynamicky zobrazují pomocí mat-error tag, který reaguje na stav ověření ovládacího prvku formuláře.
9. Je možné upravit vzhled hranatých materiálových čipů?
10. Ano, Angular Material umožňuje rozsáhlé možnosti stylingu a motivů pro přizpůsobení čipů podle požadavků na design vaší aplikace.

Závěrečné informace o používání Angular pro vylepšenou správu e-mailových vstupů

Angular Material Chips nabízí praktické a vizuálně přitažlivé řešení pro správu více e-mailových vstupů ve formuláři. Integrací těchto čipů s výkonnými funkcemi Angular pro manipulaci s formuláři a ověřování mohou vývojáři poskytnout jasné a bezchybné uživatelské prostředí. Toto nastavení pomáhá nejen snižovat chyby uživatelského vstupu, ale také prezentovat tyto chyby intuitivním způsobem, čímž zlepšuje celkovou použitelnost webových aplikací, které vyžadují správu zadávání e-mailů.