angular表单校验的值valid、invalid、pristine和dirty

本文介绍Angular内置表单校验机制，包括valid、invalid、pristine和dirty状态，以及如何通过CSS属性和API控制表单状态。同时，讨论了如何避免浏览器自带验证，及type属性和ng-pattern的使用技巧。

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

最近要做angular项目，做笔记
angular内置了一套表单校验，其中包含几个状态

①valid、invalid、pristine和dirty
valid标记表单元素有效；
invalid标记表单元素无效；
pristine表示表单元素是纯净的，用户未操作过；
dirty表示表单元素是已被用户操作过；
②更改css属性
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}

$s c o p e . i n f o F r o m .$ setPristine(); //设置表单为未编辑的纯净状态
$s c o p e . i n f o F r o m . n a m e .$ setDirty(); //设置表单为用户已经编辑过得【脏】状态

去掉浏览器验证

四.注意事项
①novalidate
标准浏览器如火狐，谷歌等对HTML5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。
②type类型
HTML5的type属性可以包含text、email、number等，但是angular又内部重写了这些属性，所以放心大胆的去用吧，angular完全可以满足你所有的验证。
③type=“number"还是ng-pattern=”/¹{6}$/"
你可以使用type="number"来限制输入框只能输入数字，当然你也可以用ng-pattern来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。

0-9 ↩︎