我有一个电子邮件输入,如下所示
这是代码:
<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
吗?
答案 0 :(得分:0)
我不确定您是如何创建 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>