Angular从零到一2.5 验证结果的样式自定义

<b>2.5　验证结果的样式自定义</b>

<b></b>

如果我们在开发工具中查看网页源码，可以看到经过渲染后的控件html代码，如图 2.11所示。

图 2.11　验证的样式

用户名控件的html代码是下面的样子：在验证结果为false时input的样式是ng-invalid：

&lt;input

  name="username"

  class="ng-pristine ng-invalid ng-touched"

  required=""

  type="text"

  minlength="3"

  ng-reflect-minlength="3"

  ng-reflect-name="username"&gt;

类似地可以实验一下，填入一些字符满足验证要求之后，看input的html是下面的样子，在验证结果为true时input的样式是ng-valid：

  class="ng-touched ng-dirty ng-valid"

  ng-reflect-model="ssdsds"

知道这个后，我们可以自定义不同验证状态下的控件样式。在组件的修饰符中把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的元素，如下所示：

  input.ng-invalid{

  input.ng-valid{

很多开发人员不太了解css，其实css还是比较简单的，我建议先从selector开始看，selector的概念弄懂后angular 2的开发中用css就会顺畅很多。具体可见w3school中对于css selctor的参考和https://css-tricks.com/multiple-class-id-selectors/。