Angular 开发小妙招1：提交表单数据验证不通过，更改输入组件的样式-优快云博客

本文探讨了在Angular中如何精确控制表单验证的样式显示，特别是在input失去焦点且验证失败时才显示错误样式的技巧。文章介绍了如何利用ng-invalid和ng-touched样式结合CSS进行定制，以及在提交表单前如何确保所有输入项都触发验证，从而提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发表单时，客户端数据完整性校验是必不可少的，在jquery 时代出现了无数的数据验证插件也很好用，开发Angular 应用时，angular 内置了一些常用的数据验证指令。今天要讲的不是这些指令如何使用，今天讲什么呢，今天讲一些关于验证样式的问题，相关的基础知识在angular.cn 官方文档中都有介绍，在此就不多说了。但还有一些小的易用性方面的没有在文档中指出。

比如：设置了必填后（就是在input 中增加 required 属性），表单加载完毕后，还没有做任何操作时（无任何的键盘及鼠标操作），input 控件自动的改变了样式，比如红色边框，而我想着是在input 失去焦点后在添加红色的边框，这种情况咋搞呢，经过细致的参考官方文档，我们可以设置样式来达到这个效果，如：

.form-control.ng-invalid.ng-touched { border-color: red; }

ng-invalid：数据验证不通过时添加的样式名
ng-touched：失去焦点后添加的样式名

添加以上样式后，只有当input 失去焦点并且数据验证不通过时边框的颜色才会为红色。

如果表单加载完成后，我们直接点击提交按钮会怎样呢，假设我们的提交代码如下

public btnSubmit() {
    if ( this.frm.valid ) {
        ......
    } 
}

此时表单的验证状态肯定是false , 数据验证失败，而控件上又没有提示，怎么办？通过查看浏览器源代码发现input 中没有ng-touched 样式，如何添加上这个呢？各种百度 google 后得出，需要循环from 中的所有control，并调用每个control的markAsTouched 方法代码大至如下：

public btnSubmit() {
    Object.values( this.frm.controls).forEach( (c:FormControl) => c.markAsTouched());  // 添加这一句后，验证失败的input 会添加 ng-touched 样式，控件的边框就会变红了
    if ( this.frm.valid ) {
        ......
    } 
}

没啥高深的内容，废话有点多，就这样吧