开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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/。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Angular最新教程-第十三节 管道Pipes 自定义管道
Angular最新教程-第十三节 管道Pipes 自定义管道
24 0
Angular 如何自定义 pipe 管道以及参数传递问题
Angular 如何自定义 pipe 管道以及参数传递问题
62 0
Angular 自定义 structural 指令的一个例子
Angular 自定义 structural 指令的一个例子
33 0
angular的又一本好书
MANNING出的《ANGULAR.JS IN ACTION》。 比上本看完的书《ANGULAR ESSENTIAL》多了一些有全局性的东东。 八个关键概念:MODULE,CONFIG,ROUTE,SERVICE,CONTROLLER,$SCOPE,VIEW,DIRECTIVE。
923 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载