Kampinis el. pašto patvirtinimas su medžiagų lustais

El. pašto įvesties tobulinimas naudojant kampines medžiagos drožles

Frontend diegimas naudojant Angular ir 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);
  }
}

Serverio el. pašto patvirtinimas kampinėms medžiagos lustams

Backend diegimas naudojant Node.js ir 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'));

El. pašto patvirtinimas kampiniu būdu: įprastos užklausos

1. Kaip patvirtinate el. laišką naudodami kampines medžiagas?
2. Naudoti Validators.pattern su reguliaria išraiška, kad įsitikintumėte, jog el. laiškas atitinka teisingą formatą, prieš įtraukiant jį kaip lustą.
3. Ar Angular Material Chips gali apdoroti kelis el. laiškus?
4. Taip, lustus galima sukonfigūruoti taip, kad jie priimtų kelis el. laiškus, kurių kiekvienas formos lauke pateikiamas kaip atskiras lustas.
5. Koks yra vaidmuo FormControl valdant žetonus?
6. FormControl seka atskiro lusto vertę ir patvirtinimo būseną, palengvindama integravimą su kampinėmis formomis.
7. Kaip gali būti rodomi klaidų pranešimai su netinkamais el.
8. Klaidų pranešimai dinamiškai rodomi naudojant mat-error žyma, kuri reaguoja į formos valdiklio patvirtinimo būseną.
9. Ar įmanoma pritaikyti kampinių medžiagų lustų išvaizdą?
10. Taip, „Angular Material“ suteikia plačias stiliaus ir temų parinktis, kad būtų galima pritaikyti lustus pagal jūsų programos dizaino reikalavimus.

Paskutinės įžvalgos apie Angular naudojimą patobulintam el. pašto įvesties valdymui

Angular Material Chips – tai praktiškas ir vizualiai patrauklus sprendimas kelių el. pašto įvestims tvarkyti formoje. Integruodami šiuos lustus su galingomis „Angular“ formų tvarkymo ir patvirtinimo funkcijomis, kūrėjai gali suteikti aiškią, be klaidų naudotojo patirtį. Ši sąranka ne tik padeda sumažinti vartotojo įvesties klaidas, bet ir jas pateikti intuityviai, taip pagerinant bendrą žiniatinklio programų, kurioms reikalingas el. pašto įvesties valdymas, naudojimą.