Javascript 如何在angular中正确设置表单验证

使用角度版本11.1.2

因此，在我的项目中，有一个简单的输入字段，使用angular material设置样式，在重定向到新页面之前输入名称，下面是我在Form control中设置的一些验证器：

必需的

最小长度为5

最大长度为25

在所有上述验证器检查完毕后；通过（

/api/check/：name

）上的api请求，它返回true（如果名称已经存在）和false（如果名称不存在）——（这一个当前未在代码中实现，我认为必须使用自定义异步验证器）

我还在输入字段上设置了自动对焦；加载组件后，焦点将直接转到该输入字段。此外，为了显示用户名是否有效，还有一些mat图标，如matSuffix

✔ 对于有效用户名

和

❌ 对于无效的表单输入

，还有一个

mat progress微调器

，用于显示异步验证程序正在工作

这是我的component.html：

输入您的用户名
清楚的
完成
{{getErrorMessage（）}}
登录
登录

首先，对每个属性进行解释：

• valid：如果所有验证器都有效，则为true
• 无效：如果一个验证器无效，则为true
• 脏：将在FormControl值更改时变为真
• pristine：只要您的FormControl值没有被更改，它将是真的
• 触摸：一旦你的元素失去焦点，就会变成现实（类似于onBlur）
• 未触及：只要您的元素未被触及，则为真
• 挂起：用于异步验证

下面是有关异步验证的更多信息

在进行自定义验证时，我喜欢使用invalid和toucted。如果我是你，我会这么做：

清楚的
完成

从@Leccho的回复中，向组件添加以下

customErrorStateMatcher

类解决了问题

//用于在显示错误时更改行为的新类
类CustomErrorStateMatcher实现ErrorStateMatcher{
isErrorState（控件：FormControl | null，形式：FormGroupDirective | NgForm | null）：布尔值{
return！！（control&&control.invalid&&control.dirty | | control.tocked））；
}
}
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.scss']
})
导出类HomeComponent实现OnInit{
私有主虚拟路径：字符串；
用户名=新表单控件（空[
需要验证器，
验证器。最小长度（5），
验证器.模式（'^[a-zA-Z0-9_]*$）
]);
matcher=新的CustomErrorStateMatcher（）；
构造函数（）{
}
ngOnInit（）：void{
//this.username.markAsTouched（）；
}
getErrorMessage（）：字符串{
if（this.username.hasError（'required'）&&this.username.dirty）{
return“您不能将用户名留空！”；
}else if（this.username.hasError（'minlength'）&&this.username.dirty）{
return“用户名长度必须至少为5个字母！”；
}else if（this.username.hasError（'pattern'）&&this.username.dirty）{
return“仅允许[a-z、a-z和z]作为有效用户名！”；
}
返回“”；
}
navigateToUserWindow（）：void{
this.route.navigate（['user']）；
}
}

ok，上面的html仅适用于表单无效、有效或处于挂起状态的指示符，但当用户在框中键入时，如何在

mat error

中显示错误消息只有那些图标指示符在更改，但表单无效时不显示错误。只有当用户将焦点从错误上的输入元素中移除时，才会显示这些错误。当用户直接输入用户输入时，如何显示错误？默认情况下，只要输入无效，只要您松开输入焦点，mat error将立即显示。如果你想改变这一点，你必须自己定制ErrorStateMatcher。如果你用谷歌搜索，你应该有很多例子。啊，我看到你在上面添加了ngIf。您可以删除它。这是自动处理的。