如何在以角度形式单击外部输入时添加验证答案

【问题标题】：How to add validation on clicking outside input in angular form如何在以角度形式单击外部输入时添加验证
【发布时间】：2021-07-20 19:50:55
【问题描述】：

我有一个电子邮件输入，如下所示

这是代码：

<form [formGroup]="emailGroupForm" (ngSubmit)="formSubmitted()>
    <mch-token-field formControlName="emails" htmlId="email-token-field" [hideClear]="true" [hideCount]="true"
            class="md-margin__bottom--none md-margin__top--s md-h6 md-body--bold" [tokenValidators]="emailValidators"></mch-token-field>

</form>

mch-token-field 是一个自定义的输入组件，用于多个组件，我不允许更改此组件中的任何内容。现在，当我在电子邮件输入中输入内容并按 Enter 时，电子邮件就会被添加。但是我想要的是在输入后在框外单击时添加电子邮件，就像我触摸了组件一样。

我希望在我们在电子邮件框外单击时也发生以下验证：

 <div class="md-h6 md-body--bold md-color--red-50"
          *ngIf="emailGroupForm.controls.emails.touched && emailGroupForm.controls.emails.errors">
        <md-icon name="error" class="md-margin__right--xs error-icon"></md-icon>
        <ng-container *ngIf="emailGroupForm.controls.emails.errors.invalidEmail">
          One or more emails seems to be invalid
        </ng-container>

在我的.ts 文件中：

import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

 emailValidators = [ this.emailPatternValidator() ];

  emailPatternValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (!control.value || this.emailPattern.test(control.value)) {
        return null;
      }
      return {
        invalidEmail: control.value,
      };
    };
  }

在邮箱输入框中输入内容并点击外部时如何添加验证？我可以为此目的以某种方式使用emailGroupForm.controls.emails.touched吗？

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

我不确定你是如何创建 formGroup 的，这是一个工作示例：

打字稿文件：

  emailPattern = new RegExp('^[a-zA-Z0-9_.+-]+@[a-z0-9.-]+\\.[a-z]{2,20}$');

 emailPatternValidator = (control: AbstractControl): ValidationErrors | null => {
  if (!control.value || this.emailPattern.test(control.value)) {
   return null;
  }
  return {
   invalidEmail: control.value,
 };
};

formGroup = new FormGroup({
  email: new FormControl(null, [this.emailPatternValidator]),
});

HTML 模板：

<mat-form-field  >
 <mat-label>Email</mat-label>
 <input matInput formControlName="email" />
 <mat-error *ngIf="formGroup.controls.email?.errors?.invalidEmail">'The email format is invalid
 </mat-error>
</mat-form-field>

【讨论】：