在 Angular 7 表单控件的单个输入字段中验证电子邮件、电话和 PAN 号码答案

【问题标题】：Validate Email,Phone and PAN number in single Input field in angular 7 form control在 Angular 7 表单控件的单个输入字段中验证电子邮件、电话和 PAN 号码
【发布时间】：2019-12-27 09:40:06
【问题描述】：

所以我想创建一个输入字段，它会告诉它是哪种类型，例如手机、电子邮件或 PAN 号，那么我们如何在 formcontrol 中做到这一点

我尝试使用正则表达式模式，但它不起作用

<form [formGroup]="validates_input">
<mat-form-field>
    <input matInput placeholder="Enter Email/ PAN / PAN">
  </mat-form-field>
</form>
<button>Submit</button>

【问题讨论】：

标签： angular angular-material angular2-forms form-control

【解决方案1】：

您可以编写自己的验证器。使用两个不同的正则表达式值的组合。

电子邮件的简单示例

([a-z0-9\-\_\.]+\@[\w\d\-\_]+\.[\w]+)

简单的数字正则表达式

([\d]+)

在你的组件文件中添加这个验证器函数

// the validator
export function checkFilterInputValidator(nameRe: RegExp): ValidatorFn {
  return (control:AbstractControl): {[key:string]: any} | null => {
    // if input field is empty return as valid else test
    const ret = (control.value !== '') ? nameRe.test(control.value) : true;
    return !ret ? {'invalidNumber': {value: control.value}} : null;
  };
}

在你的组件中添加到你的控件


inputControl = new FormControl("", 
                               [Validators.required,
                               checkFilterInputValidator(/([a-z0-9\-\_\.]+\@[\w\d\-\_]+\.[\w]+)|([\d]+)/ig)]);

并且在你的模板中，你必须添加一个显示错误的字段或创建一个依赖于错误的 css 类，即输入框的红框表示有错误。

<form [formGroup]="validates_input">
<mat-form-field>
<div *ngIf="inputControl .errors && inputControl .errors.invalidNumber">Invalid input</div>
    <input matInput placeholder="Enter Email/ PAN / PAN">
  </mat-form-field>
</form>
<button>Submit</button

查看文档：Custom validators

【讨论】：