我正在尝试实现自定义验证器功能来检查是否输入了电话号码(家庭电话和移动电话) . 我想在两个字段上显示错误消息,当它们被触摸并且没有有效值时,由于某种原因我的代码没有按预期工作 . 请帮帮我这篇文章 . -谢谢!这是stackblitz链接https://stackblitz.com/edit/angular-ve5ctu
createFormGroup() {
this.myForm = this.fb.group({
mobile : new FormControl('', [this.atLeastOnePhoneRequired]),
homePhone : new FormControl('', [this.atLeastOnePhoneRequired])
});
}
atLeastOnePhoneRequired(control : AbstractControl) : {[s:string ]: boolean} {
const group = control.parent;
if (group) {
if(group.controls['mobile'].value || group.controls['homePhone'].value) {
return;
}
}
let errorObj = {'error': false};
return errorObj;
}
1 回答
不是在每个formControl上标记验证器,而是为电话号码创建一个嵌套组,并将验证器应用于该组 . 在这个示例中,我将在整个表单上应用验证器 .
同样在应用验证器时,我们需要在字段有效时返回
null
.此外,由于您使用的是Angular材质,我们需要添加ErrorStateMatcher才能显示
mat-errors
.mat-errors
仅在验证器设置为表单控件时显示,而不是表单组 .您的代码应如下所示:
错误状态匹配器:
你在组件中标记的:
然后在两个输入字段上将其标记为模板 . 另请注意
*ngIf
如何查找显示验证消息:StackBlitz