角度7的模式验证

问题描述 投票:0回答:1

我的Angular 7表单中有一个联系号码字段。我使用'表单构建器'和'validators.pattern'进行验证。在HTML中,我尝试了两种方法来确定是否存在错误,但两者都没有用。

TypeScript:mobnumPattern = "^[6-9][0-9]{9}$"; this.myForm = this.formbuilder.group({ contact_no: ['', [Validators.required,Validators.pattern(this.mobnumPattern)]],} )

1.当我使用下面的HTML时,验证总是显示为true

*ngIf="((myForm.controls['contact_no'].touched) && (myForm.controls['contact_no'].hasError(pattern)))"

2.当我使用下面的HTML时,验证总是显示为false

*ngIf="((myForm.controls['contact_no'].touched) && (myForm.controls['contact_no'].errors.pattern))"

不知道怎么解决这个问题?

提前致谢。

regex typescript angular7
1个回答
2
投票

让我们回顾你提到的两种情况。

1.当我使用下面的HTML时,验证总是显示为true

我尝试在stackblitz中重新创建这个问题,但与你所说的不同,它总是错误的。无论如何,检查myForm.controls['contact_no'].hasError(pattern)返回false,因为hasError()expecting a string as its parameter,但这里的模式是未定义的。

使用此选项可检查表单控件是否存在模式验证错误。

*ngIf="((myForm.controls['contact_no'].touched)&& myForm.controls['contact_no'].hasError('pattern')))"

2.当我使用下面的HTML时,验证总是显示为false

如果表单控件没有任何验证错误,myForm.controls['contact_no'].errors将为null。因此,当检查模板中的myForm.controls['contact_no'].errors.pattern时会抛出错误并返回undefined。如果myForm.controls ['contact_no']。errors为null,请使用安全导航操作符来防止视图呈现失败。

像这样:

*ngIf="((myForm.controls['contact_no'].touched) && (myForm.controls['contact_no'].errors?.pattern)"

我用上面提到的修复制作了一个stackblitz。检查链接以查看工作演示。

© www.soinside.com 2019 - 2024. All rights reserved.