Γωνιακή επικύρωση email με τσιπ υλικού

Βελτίωση εισαγωγής email με τσιπ γωνιακού υλικού

Υλοποίηση Frontend με χρήση 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);
  }
}

Επικύρωση email από την πλευρά του διακομιστή για τσιπ Angular Material

Υλοποίηση Backend με χρήση 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'));

Επικύρωση email στο Angular: Συνήθη ερωτήματα

1. Πώς επικυρώνετε ένα email χρησιμοποιώντας Angular Material Chips;
2. Χρησιμοποιήστε το Validators.pattern με μια τυπική έκφραση για να βεβαιωθείτε ότι το email ταιριάζει με τη σωστή μορφή προτού το προσθέσετε ως τσιπ.
3. Μπορούν τα Angular Material Chips να χειριστούν πολλά μηνύματα ηλεκτρονικού ταχυδρομείου;
4. Ναι, οι μάρκες μπορούν να ρυθμιστούν ώστε να δέχονται πολλά μηνύματα ηλεκτρονικού ταχυδρομείου, καθένα από τα οποία αντιπροσωπεύεται ως ξεχωριστό τσιπ στο πεδίο φόρμας.
5. Ποιος είναι ο ρόλος του FormControl στη διαχείριση τσιπ;
6. FormControl παρακολουθεί την τιμή και την κατάσταση επικύρωσης ενός μεμονωμένου τσιπ, διευκολύνοντας την ενσωμάτωση με Angular φόρμες.
7. Πώς μπορούν να εμφανιστούν μηνύματα σφάλματος με μη έγκυρα email;
8. Τα μηνύματα σφάλματος εμφανίζονται δυναμικά χρησιμοποιώντας το mat-error ετικέτα που αντιδρά στην κατάσταση επικύρωσης του στοιχείου ελέγχου φόρμας.
9. Είναι δυνατή η προσαρμογή της εμφάνισης των Angular Material Chips;
10. Ναι, το Angular Material επιτρέπει εκτεταμένες επιλογές στυλ και θέματος για την προσαρμογή των τσιπ σύμφωνα με τις σχεδιαστικές απαιτήσεις της εφαρμογής σας.

Τελικές πληροφορίες σχετικά με τη χρήση του Angular για βελτιωμένη διαχείριση εισόδου email

Τα Angular Material Chips προσφέρουν μια πρακτική και οπτικά ελκυστική λύση για τη διαχείριση πολλαπλών εισόδων email σε μια φόρμα. Ενσωματώνοντας αυτά τα τσιπ με τις ισχυρές δυνατότητες χειρισμού φόρμας και επικύρωσης της Angular, οι προγραμματιστές μπορούν να παρέχουν μια ξεκάθαρη εμπειρία χρήστη χωρίς σφάλματα. Αυτή η ρύθμιση όχι μόνο βοηθά στη μείωση των σφαλμάτων εισαγωγής των χρηστών, αλλά και στην παρουσίαση αυτών των σφαλμάτων με διαισθητικό τρόπο, βελτιώνοντας έτσι τη συνολική χρηστικότητα των εφαρμογών web που απαιτούν διαχείριση εισόδου email.