angular 7 中的模式验证

Question

我的 Angular 7 form.I 中有一个联系电话字段 'form builder' 和 'validators.pattern' 用于 validation.In HTML，我尝试了两种方法来判断是否有错误，但都没有用。

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

1.When我在下面使用HTML，验证总是显示true

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

2.When我下面用的HTML，验证总是显示false

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

知道如何解决这个问题吗？

提前致谢。

Answer 1

让我们回顾一下您提到的两种情况。

1.When I used below HTML, validation always shows true

我尝试在 stackblitz 中重现该问题，但与您所说的不同，它始终是错误的。无论如何检查 myForm.controls['contact_no'].hasError(pattern) returns false 因为 hasError() 是 expecting a string as its parameter, 但这里的模式是未定义的。

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

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

2.When I used below HTML, validation always shows false

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

myForm.controls['contact_no'].errors 将为 null。所以在模板中检查 myForm.controls['contact_no'].errors.pattern 时会抛出错误并且 return 未定义。如果 myForm.controls['contact_no'].errors 为 null.

，则使用安全导航运算符来防止视图呈现失败

像这样：

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

我已对上述修复程序进行了 stackblitz。检查 link 以查看工作演示。

angular 7 中的模式验证

Pattern validation in angular 7

regex

typescript

angular7