Validasi Email Sudut dengan Chip Material

Meningkatkan Input Email dengan Chip Material Angular

Implementasi Frontend menggunakan Angular dan 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);
  }
}

Validasi Email sisi server untuk Chip Material Angular

Implementasi Backend menggunakan Node.js dan 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'));

Validasi Email di Angular: Pertanyaan Umum

1. Bagaimana Anda memvalidasi email menggunakan Angular Material Chips?
2. Menggunakan Validators.pattern dengan ekspresi reguler untuk memastikan email cocok dengan format yang benar sebelum menambahkannya sebagai chip.
3. Bisakah Angular Material Chips menangani banyak email?
4. Ya, chip dapat dikonfigurasi untuk menerima beberapa email, masing-masing direpresentasikan sebagai chip terpisah dalam bidang formulir.
5. Apa peran dari FormControl dalam mengelola chip?
6. FormControl melacak nilai dan status validasi masing-masing chip, memfasilitasi integrasi dengan formulir Angular.
7. Bagaimana pesan kesalahan ditampilkan dengan email yang tidak valid?
8. Pesan kesalahan ditampilkan secara dinamis menggunakan mat-error tag yang bereaksi terhadap status validasi kontrol formulir.
9. Apakah mungkin untuk menyesuaikan tampilan Angular Material Chips?
10. Ya, Angular Material memungkinkan opsi gaya dan tema yang luas untuk menyesuaikan chip sesuai dengan kebutuhan desain aplikasi Anda.

Wawasan Akhir tentang Penggunaan Angular untuk Peningkatan Manajemen Input Email

Angular Material Chips menawarkan solusi praktis dan menarik secara visual untuk mengelola banyak input email dalam formulir. Dengan mengintegrasikan chip ini dengan fitur validasi dan penanganan formulir Angular yang canggih, pengembang dapat memberikan pengalaman pengguna yang jelas dan bebas kesalahan. Pengaturan ini tidak hanya membantu mengurangi kesalahan input pengguna tetapi juga menampilkan kesalahan tersebut dengan cara yang intuitif, sehingga meningkatkan kegunaan aplikasi web secara keseluruhan yang memerlukan manajemen input email.