我的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))"
不知道怎么解决这个问题?
提前致谢。
让我们回顾你提到的两种情况。
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。检查链接以查看工作演示。