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

Question

我正在尝试创建一个带有输入的表单，使用芯片将消息发送到各种电子邮件。我的功能几乎可用，但我不知道当您写了无效的电子邮件或没有写任何内容时如何正确显示消息错误

这是我的自定义验证器

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.log(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>

Answer 1

您的问题与此 GitHub 问题类似：MatChipInput 的 mat-error 未显示在输入下。

1. 触发

   errorState = true

   显示错误消息。
2. 设置

   friends

   控制的误差。
3. 将

   friends

   控件标记为已触摸，以根据您的情况显示错误消息：

   @if (friends.errors && friends.touched)

   。

import {MatChipGrid} from '@angular/material/chips';

@ViewChild('chipGrid') chipGrid: MatChipGrid;

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

  const friends = [...this.friends.value, friendEmail];
  const validationErrors = emailsArrayValidator(new FormControl(friends));
  console.log(validationErrors);
  if (validationErrors) {
    this.friendsErrorMessage = 'The last email is not valid';
    this.friends.setErrors(validationErrors, { emitEvent: false })
    this.chipGrid.errorState = true;
  } else {
    this.friendsErrorMessage = '';
    this.friends.setValue(friends);
  }

  this.friends.markAsTouched();
  event.chipInput!.clear();
}

演示@StackBlitz