Angular 2 表单数据验证

上一章节中我们已经学习了如何用把表单还没有和我们的模型进行绑定

我们还可以通过 ngModel 跟踪修改状态与有效性验证

我们使用了三个 css 类来更新控件,以便反映当前状态

状态为 true 时的类为 false 时的类
控件已经被访问过ng-touchedng-untouched
控件值已经变化ng-dirtyng-pristine
控件值是有效的ng-validng-invalid

现在我们添加自定义 CSS 来反应表单的状态

创建 angular2-forms/form.css 文件 ,复制以下内容

然后修改 index.html 文件,把以下样式表

最后修改 app/site-form.component.html 为以下内容

通过把 div 元素的 hidden 属性绑定到 name 控件的属性,我们就可以控制 "name" 字段错误信息的可见性了

本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!