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