Угаона валидација е-поште са материјалним чиповима

Побољшање уноса е-поште помоћу чипова Ангулар материјала

Имплементација фронтенда коришћењем Ангулара и ТипеСцрипт-а

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

Валидација е-поште на страни сервера за Ангулар материјалне чипове

Позадинска имплементација користећи Ноде.јс и Екпресс

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

Валидација е-поште у Ангулару: Уобичајени упити

1. Како потврђујете е-пошту користећи Ангулар материјалне чипове?
2. Користити Validators.pattern са регуларним изразом како би се осигурало да имејл одговара исправном формату пре него што га додате као чип.
3. Да ли Ангулар материјални чипови могу да обрађују више е-порука?
4. Да, чипови се могу конфигурисати да прихватају више е-порука, од којих је свака представљена као посебан чип у пољу обрасца.
5. Која је улога FormControl у управљању чиповима?
6. FormControl прати вредност и статус валидације појединачног чипа, олакшавајући интеграцију са Ангулар формама.
7. Како се поруке о грешци могу приказати са неважећим имејловима?
8. Поруке о грешкама се динамички приказују помоћу mat-error ознаку која реагује на статус валидације контроле обрасца.
9. Да ли је могуће прилагодити изглед Ангулар материјалних чипова?
10. Да, Ангулар Материал омогућава опсежне опције стила и тема за прилагођавање чипова према захтевима дизајна ваше апликације.

Коначни увиди о коришћењу Ангулара за побољшано управљање уносом е-поште

Ангулар материјални чипови нуде практично и визуелно привлачно решење за управљање вишеструким уносима е-поште у облику. Интеграцијом ових чипова са Ангулар-овим моћним функцијама руковања обрасцима и валидацијом, програмери могу да пруже јасно корисничко искуство без грешака. Ово подешавање не само да помаже у смањењу грешака у уносу корисника, већ и у представљању тих грешака на интуитиван начин, чиме се побољшава укупна употребљивост веб апликација које захтевају управљање уносом е-поште.