在 Angular 7 表单控件的单个输入字段中验证电子邮件、电话和 PAN 号码
Posted
技术标签:
【中文标题】在 Angular 7 表单控件的单个输入字段中验证电子邮件、电话和 PAN 号码【英文标题】:Validate Email,Phone and PAN number in single Input field in angular 7 form control 【发布时间】: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>
【问题讨论】:
【参考方案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
【讨论】:
以上是关于在 Angular 7 表单控件的单个输入字段中验证电子邮件、电话和 PAN 号码的主要内容,如果未能解决你的问题,请参考以下文章
Angular 7 - ControlValueAccessor - 修剪绑定到表单的输入值
如何使用响应式表单将验证器添加到表单控件以从角度材料进行匹配输入