使用材料芯片进行 Angular 电子邮件验证

使用 Angular Material 芯片增强电子邮件输入

使用 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 Material 芯片的服务器端电子邮件验证

使用 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 Material Chips 验证电子邮件？
2. 使用 Validators.pattern 使用正则表达式确保电子邮件在添加为芯片之前匹配正确的格式。
3. Angular Material Chips 可以处理多封电子邮件吗？
4. 是的，芯片可以配置为接受多封电子邮件，每封电子邮件在表单字段中表示为单独的芯片。
5. 的作用是什么 FormControl 在管理芯片方面？
6. FormControl 跟踪单个芯片的价值和验证状态，促进与 Angular 表单的集成。
7. 如何显示无效电子邮件的错误消息？
8. 错误消息使用动态显示 mat-error 对表单控件的验证状态做出反应的标记。
9. 是否可以定制 Angular Material Chip 的外观？
10. 是的，Angular Material 允许提供广泛的样式和主题选项，以便根据您的应用程序的设计要求定制芯片。

关于使用 Angular 增强电子邮件输入管理的最终见解

Angular Material Chips 提供了一种实用且具有视觉吸引力的解决方案，用于管理表单中的多个电子邮件输入。通过将这些芯片与 Angular 强大的表单处理和验证功能集成，开发人员可以提供清晰、无错误的用户体验。此设置不仅有助于减少用户输入错误，还有助于以直观的方式呈现这些错误，从而提高需要电子邮件输入管理的 Web 应用程序的整体可用性。