マテリアルチップを使用したAngularメール検証

Angular マテリアル チップによるメール入力の強化

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

Angular マテリアル チップのサーバー側電子メール検証

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

Angular でのメール検証: 一般的なクエリ

1. Angular マテリアル チップを使用して電子メールを検証するにはどうすればよいですか?
2. 使用 Validators.pattern 正規表現を使用して、チップとして追加する前に電子メールが正しい形式と一致することを確認します。
3. Angular マテリアル チップは複数の電子メールを処理できますか?
4. はい、チップは複数の電子メールを受け入れるように構成でき、各電子メールはフォーム フィールド内で個別のチップとして表示されます。
5. の役割は何ですか FormControl チップの管理では？
6. FormControl 個々のチップの値と検証ステータスを追跡し、Angular フォームとの統合を容易にします。
7. 無効な電子メールでエラー メッセージが表示されるのはなぜですか?
8. エラーメッセージは、 mat-error フォームコントロールの検証ステータスに反応するタグ。
9. Angular マテリアル チップの外観をカスタマイズすることはできますか?
10. はい、Angular マテリアルを使用すると、アプリケーションの設計要件に応じてチップをカスタマイズするための広範なスタイルとテーマのオプションが可能になります。

Angular を使用したメール入力管理の強化に関する最終的な洞察

Angular マテリアル チップは、フォーム内の複数の電子メール入力を管理するための実用的で視覚的に魅力的なソリューションを提供します。これらのチップを Angular の強力なフォーム処理および検証機能と統合することで、開発者は明確でエラーのないユーザー エクスペリエンスを提供できます。この設定は、ユーザーの入力エラーを減らすだけでなく、それらのエラーを直感的な方法で表示することにも役立つため、電子メール入力管理を必要とする Web アプリケーションの全体的な使いやすさが向上します。