Перевірка електронної пошти Angular за допомогою чіпів матеріалу

Покращення введення електронної пошти за допомогою мікросхем Angular Material

Реалізація інтерфейсу за допомогою Angular і 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);
  }
}

Серверна перевірка електронної пошти для мікросхем Angular Material

Впровадження бекенда за допомогою Node.js і 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'));

Перевірка електронної пошти в Angular: типові запити

1. Як перевірити електронний лист за допомогою Angular Material Chips?
2. Використовувати Validators.pattern з регулярним виразом, щоб переконатися, що електронний лист відповідає правильному формату, перш ніж додати його як чіп.
3. Чи можуть чіпи Angular Material обробляти кілька електронних листів?
4. Так, чіпи можна налаштувати для прийому кількох електронних листів, кожна з яких представлена ​​як окрема чіп у полі форми.
5. Яка роль FormControl в управлінні мікросхемами?
6. FormControl відстежує значення та статус перевірки окремого чіпа, полегшуючи інтеграцію з формами Angular.
7. Як повідомлення про помилки можуть відображатися з недійсними електронними адресами?
8. Повідомлення про помилки динамічно відображаються за допомогою mat-error тег, який реагує на стан перевірки елемента керування форми.
9. Чи можна налаштувати зовнішній вигляд Angular Material Chips?
10. Так, Angular Material надає широкі варіанти стилю та тематики, щоб налаштувати чіпи відповідно до вимог дизайну вашої програми.

Остаточні ідеї щодо використання Angular для покращеного керування введенням електронної пошти

Angular Material Chips пропонують практичне та візуально привабливе рішення для керування кількома введеннями електронних листів у формі. Інтегруючи ці мікросхеми з потужними функціями Angular для обробки форм і перевірки, розробники можуть забезпечити чітку роботу користувача без помилок. Це налаштування не лише допомагає зменшити кількість помилок при введенні користувачем, але й у представленні цих помилок інтуїтивно зрозумілим способом, таким чином покращуючи загальну зручність використання веб-додатків, які потребують керування введенням електронної пошти.