Kulmikas sähköpostin vahvistus materiaalisirujen avulla

Sähköpostin syöttöä tehostetaan kulmikkaalla materiaalisirulla

Käyttöliittymän toteutus Angularilla ja TypeScriptillä

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

Palvelinpuolen sähköpostin vahvistus kulmikasmateriaalisiruille

Taustatoteutus Node.js:n ja Expressin avulla

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

Sähköpostin vahvistus kulmassa: yleiset kyselyt

1. Kuinka vahvistat sähköpostin Angular Material Chips -sirujen avulla?
2. Käytä Validators.pattern säännöllisellä lausekkeella varmistaaksesi, että sähköposti vastaa oikeaa muotoa ennen sen lisäämistä siruksi.
3. Voivatko Angular Material Chips käsitellä useita sähköposteja?
4. Kyllä, sirut voidaan määrittää hyväksymään useita sähköposteja, joista jokainen esitetään erillisenä siruna lomakekentässä.
5. Mikä on rooli FormControl pelimerkkien hallinnassa?
6. FormControl seuraa yksittäisen sirun arvoa ja validointitilaa, mikä helpottaa integrointia Angular-muotoihin.
7. Kuinka virheilmoituksia voidaan näyttää virheellisten sähköpostien kanssa?
8. Virheilmoitukset näytetään dynaamisesti käyttämällä mat-error -tunniste, joka reagoi lomakkeen ohjausobjektin vahvistustilaan.
9. Onko mahdollista muokata Angular Material Chipsin ulkonäköä?
10. Kyllä, Angular Material mahdollistaa laajat muotoilu- ja teemavaihtoehdot sirujen mukauttamiseksi sovelluksesi suunnitteluvaatimusten mukaan.

Viimeiset näkemykset Angularin käyttämisestä tehostetussa sähköpostin syötteiden hallinnassa

Angular Material Chips tarjoaa käytännöllisen ja visuaalisesti houkuttelevan ratkaisun useiden sähköpostisyötteiden hallintaan muodossa. Integroimalla nämä sirut Angularin tehokkaisiin lomakkeiden käsittely- ja validointiominaisuuksiin, kehittäjät voivat tarjota selkeän, virheettömän käyttökokemuksen. Tämä asetus ei ainoastaan ​​auta vähentämään käyttäjien syöttövirheitä, vaan myös esittämään kyseiset virheet intuitiivisella tavalla, mikä parantaa sähköpostisyötteiden hallintaa vaativien verkkosovellusten yleistä käytettävyyttä.