当前栏目
Angular从零到一2.5 验证结果的样式自定义
2.5 验证结果的样式自定义
如果我们在开发工具中查看网页源码,可以看到经过渲染后的控件HTML代码,如图 2.11所示。
图 2.11 验证的样式
用户名控件的HTML代码是下面的样子:在验证结果为false时input的样式是ng-invalid:
<input
name="username"
class="ng-pristine ng-invalid ng-touched"
required=""
type="text"
minlength="3"
ng-reflect-minlength="3"
ng-reflect-name="username">
类似地可以实验一下,填入一些字符满足验证要求之后,看input的HTML是下面的样子,在验证结果为true时input的样式是ng-valid:
<input
name="username"
class="ng-touched ng-dirty ng-valid"
required=""
type="text"
ng-reflect-model="ssdsds"
minlength="3"
ng-reflect-minlength="3"
ng-reflect-name="username">
知道这个后,我们可以自定义不同验证状态下的控件样式。在组件的修饰符中把styles数组改写一下:
styles: ['
.ng-invalid{
border: 3px solid red;
}
.ng-valid{
border: 3px solid green;
}
']
保存一下,返回浏览器可以看到,验证不通过时,如图2.12所示。
图2.12 验证失败的样式
验证通过时是这样的,如图 2.13所示。
图2.13 验证通过的样式
最后说一下,我们看到这样设置完样式后连form和fieldset都一起设置了,这是由于form和fieldset也在样式中应用了.ng-valid和.ng-valid,那怎么解决呢?只需要在.ng-valid加上input即可,这表明应用于input类型控件并且class引用了ng-invalid的元素,如下所示:
styles: ['
input.ng-invalid{
border: 3px solid red;
}
input.ng-valid{
border: 3px solid green;
}
']
很多开发人员不太了解CSS,其实CSS还是比较简单的,我建议先从Selector开始看,Selector的概念弄懂后Angular 2的开发中用CSS就会顺畅很多。具体可见W3School中对于CSS Selctor的参考和https://css-tricks.com/multiple-class-id-selectors/。
相关文章
- 宣布 AWS Amplify Studio 正式发布
- 事半功倍:从事务性批处理转向有状态批处理
- java script 技巧_java script学习方法
- 全新的 AWS 控制台主页体验
- http www.java.xs_java 实现Http请求
- 在中国区 AWS 上使用 Amplify 开发离线应用的使用心得
- Java NIO学习笔记(一)Java NIO 概述
- Java GUI编程
- 手把手教你玩转 Kubeflow on EKS(三)
- Amazon EKS 集群升级指南
- 宣布推出 AWS IoT Greengrass 2.0 – 拥有开源边缘运行时和新的开发人员功能
- Java ServletContext 详解
- 构建自定义 Angular 应用程序以使用 Amazon SageMaker Ground Truth 标记作业
- 用于 Kubeflow Pipelines 的 Amazon SageMaker Components 介绍
- Java NIO 概述
- 开始使用开源 Web 会议解决方案 Jitsi
- Java NIO概述
- python3 requests简介
- 使用 EC2 Image Builder 实现 OS 映像构建管道自动化
- python3 xml模块