在 angular 7 表单控件中的单个输入字段中验证电子邮件、Phone 和 PAN 号码

Question

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

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

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

Answer 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 class，即输入框的红框显示有错误.

<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

在 angular 7 表单控件中的单个输入字段中验证电子邮件、Phone 和 PAN 号码

Validate Email,Phone and PAN number in single Input field in angular 7 form control

angular

angular-material

angular2-forms

form-control