Angular 2 表单数据验证
- 作者: 五速梦信息网
- 时间: 2026年03月19日 18:20
上一章节中我们已经学习了如何用把表单还没有和我们的模型进行绑定
我们还可以通过 ngModel 跟踪修改状态与有效性验证
我们使用了三个 css 类来更新控件,以便反映当前状态
| 状态 | 为 true 时的类 | 为 false 时的类 |
|---|---|---|
| 控件已经被访问过 | ng-touched | ng-untouched |
| 控件值已经变化 | ng-dirty | ng-pristine |
| 控件值是有效的 | ng-valid | ng-invalid |
现在我们添加自定义 CSS 来反应表单的状态
创建 angular2-forms/form.css 文件 ,复制以下内容
然后修改 index.html 文件,把以下样式表
最后修改 app/site-form.component.html 为以下内容
通过把 div 元素的 hidden 属性绑定到 name 控件的属性,我们就可以控制 "name" 字段错误信息的可见性了
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!
- 上一篇: JavaScript 代码规范
- 下一篇: JavaScript 验证 API
相关文章
-
JavaScript 代码规范
JavaScript 代码规范
- 互联网
- 2026年03月19日
-
JavaScript 函数定义
JavaScript 函数定义
- 互联网
- 2026年03月19日
-
JavaScript 函数参数
JavaScript 函数参数
- 互联网
- 2026年03月19日
-
JavaScript 验证 API
JavaScript 验证 API
- 互联网
- 2026年03月19日
-
JavaScript 保留关键字
JavaScript 保留关键字
- 互联网
- 2026年03月19日
-
JavaScript 错误throw try catch
JavaScript 错误throw try catch
- 互联网
- 2026年03月19日






