Проверка электронной почты с помощью чипов углового материала

Я пытаюсь создать форму с вводом, используя чипы для отправки сообщения на различные электронные письма. У меня он почти функционален, но я не знаю, как правильно показывать ошибку сообщения, когда вы пишете неверный адрес электронной почты или ничего не пишете.

Это мой собственный валидатор

import { FormControl } from '@angular/forms';

const REGEXP_EMAIL =
  /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

export const 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 };
};

Это компонент.ts

  constructor(private fb: FormBuilder) {
    this.inviteForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.pattern(this.REGEXP_EMAIL)]],
      date: ['', Validators.required],
      friends: [[], [Validators.required, Validators.minLength(1), emailsArrayValidator]],
    });
  }

  get name() {
    return this.inviteForm.get('name') as FormControl;
  }

  get email() {
    return this.inviteForm.get('email') as FormControl;
  }

  get date() {
    return this.inviteForm.get('date') as FormControl;
  }

  get friends() {
    return this.inviteForm.get('friends') as FormControl;
  }

  addFriend(event: MatChipInputEvent) {
    const friendEmail = event.value.trim();

    const friends = [...this.friends.value, friendEmail];
    const validationErrors = emailsArrayValidator(new FormControl(friends));
    console.info(validationErrors);
    if (validationErrors) {
      this.friendsErrorMessage = 'The last email is not valid';
    } else {
      this.friendsErrorMessage = '';
      this.friends.setValue(friends);
    }

    event.chipInput!.clear();
  }

  removeFriend(email: string) {
    const friends = this.friends.value.slice();
    const index = friends.indexOf(email);
    if (index !== -1) {
      friends.splice(index, 1);
      this.friends.setValue(friends);
    }
  }

и это html

      <mat-form-field>
        <mat-label>Enter invitation email</mat-label>
        <mat-chip-grid #chipGrid>
          @for (friend of friends.value; track friend) {
          <mat-chip-row (removed) = "removeFriend(friend)" [editable] = "true">
            {{ friend }}
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip-row>
          }
          <input
            [matChipInputFor] = "chipGrid"
            [matChipInputSeparatorKeyCodes] = "separatorKeysCodes"
            [matChipInputAddOnBlur] = "addOnBlur"
            (matChipInputTokenEnd) = "addFriend($event)"
            required
        /></mat-chip-grid>
        @if (friends.errors && friends.touched) {
        <mat-error>{{ friendsErrorMessage }}</mat-error>
        }
      </mat-form-field>