Question

我在 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下使用时，验证始终显示为真

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

2。在HTML以下使用时，验证始终显示为假

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

有什么办法解决吗？。

谢谢。

Answer 1

让我们讨论一下您提到的两种情况。

1。当我在HTML下使用时，验证始终显示为真

我尝试用stackblitz重现该问题，但与您所说的不同，它始终是错误的。无论如何，由于myForm.controls['contact_no'].hasError(pattern)是expecting a string as its parameter,，因此支票hasError()返回false，但是这里的模式是不确定的。

使用它来检查表单控件是否存在模式验证错误。

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

2。在HTML以下使用时，验证始终显示为假

如果表单控件没有任何验证错误，

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。检查链接以查看有效的演示。

角度7中的图案验证

1 个答案: