Angular 仅在焦点或无效数据加载时加载反应式表单错误验证消息_Angular_Angular Validation

Angular 仅在焦点或无效数据加载时加载反应式表单错误验证消息

angular

Angular 仅在焦点或无效数据加载时加载反应式表单错误验证消息,angular,angular-validation,Angular,Angular Validation,正在进行angular 5表单验证。除了错误消息显示移动页面加载外，所有操作都正常。只有加载的数据不符合验证要求时，移动页面加载才正常，但不适用于未触及的选项卡，即空文本框我只想在用户开始键入时显示错误消息，除非加载的数据无效。令人惊讶的是，minLength和maxLength的行为符合我的要求，而其他人则不确定模板名称是必需的。电子邮件格式不正确。所需的最小长度。所需的最大长度。邮政编码不正确。验证服务类 @Injectable（）导出类查询控制服务{ 私有验证：Val

正在进行angular 5表单验证。除了错误消息显示移动页面加载外，所有操作都正常。只有加载的数据不符合验证要求时，移动页面加载才正常，但不适用于未触及的选项卡，即空文本框

我只想在用户开始键入时显示错误消息，除非加载的数据无效。令人惊讶的是，minLength和maxLength的行为符合我的要求，而其他人则不确定

模板


名称是必需的。
电子邮件格式不正确。
所需的最小长度。
所需的最大长度。
邮政编码不正确。

验证服务类

@Injectable（）
导出类查询控制服务{
私有验证：ValidatorFn[]=[]；
构造函数（）{
}
toFormGroup（问题：问题库[]）{
let组：any={}；
问题。forEach（问题=>{
this.validations=[]；
调试器；
for（有问题的var键。验证）{
this.mapValidation（question.validations[key]。标题，question.validations[key]。值）；
}
组[question.key]=新表单控件（question.value | | |“”，this.validations）；
});
返回新表单组（组）；
}
mapValidation（validationTitle:string，validationValue:string）{
如果（validationTitle！=null）{
如果（validationTitle==“minLength”）{
this.validations.push（Validators.minLength（parseInt（validationValue））；
}else if（validationTitle==“maxLength”）{
this.validations.push（Validators.maxLength（parseInt（validationValue））；
}else if（validationTitle==“必需”&&validationValue==“true”）{
this.validations.push（Validators.required）
}else if（validationTitle==“emailType”&&validationValue==“true”）{
this.validations.push（Validators.email）；
}else if（validationTitle==“postCodeType”&&validationValue==“true”）{
this.validations.push（postCodeValidator）；
}
}
}
}
//自定义验证
//-----------------
函数后代码验证程序（控件：FormControl）{
设givenPostCode=control.value；
让UKPostCodePattern=/^（[Gg][Ii][Rr]0[Aa]{2}）|（（[A-Za-z][0-9]{1,2}）|（（[A-Za-z][A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2}）|（[A-Za 0-9][A-Za A-z][A-Ha-hJ-Yj-y][0-9]？[A-Za 0-z]）A-z]-[A-z]/[；
var isUKPostCodeValid=UKPostCodePattern.test（给定PostCode）；
如果（！isUKPostCodeValid）{
返回{
邮政编码：{
必填：“英国有效邮政编码”，
提供：givenPostCode
}
}
}
返回null；
}

这会使错误消息等待，直到与输入的交互完成

form.controls[question.key].touched

您必须排除条件或添加另一个条件，以考虑数据已加载的事实

可能是这样

form.controls[question.key].touched || isDataLoaded

所以，如果表单无效并且（输入被触摸或数据被从某处加载），则会出现错误

您还可以使用指令使输入字段最初被触碰，从而应用验证。我想，您必须修改它，以便有条件地执行