Using Material Chips for Angular Email Validation

Enhancing Angular Material Chips for Email Input

Frontend Development with TypeScript and Angular

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 Validation on the Server-side for Angular Material Chips

Backend Development with Express and Node.js

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 Email Validation: Frequently Asked Questions

1. How can Angular Material Chips be used to validate an email?
2. Before adding the email as a chip, use the Validators.pattern with a regular expression to make sure the format is proper.
3. Can several emails be handled by Angular Material Chips?
4. It is possible to set up the chips to accept numerous emails, with each email appearing as a separate chip in the form field.
5. What function does the FormControl serve in chip management?
6. FormControl monitors each chip's value and validation state, making it easier to integrate with Angular forms.
7. How are invalid emails able to display error messages?
8. The mat-error tag dynamically displays error messages based on the form control's validation status.
9. Is it feasible to alter how Angular Material Chips look?
10. Yes, Angular Material offers a wide range of styling and theming choices to let you personalize chips to meet the specific design requirements of your application.

Last Words on Angular Utilization for Improved Email Input Management

Angular Material Chips are a useful and aesthetically pleasing way to organize several email inputs in a form. Angular's robust form handling and validation capabilities may be integrated with these chips to enable developers to offer a user experience that is straightforward and error-free. This configuration enhances the overall usability of online applications that need email input management by lowering user input errors and displaying them in an understandable manner.