簡介Angular Material的Form Field | Angular Material form
前幾天我們介紹了幾個AngularMaterial常見的文字型表單欄位控制項,如Input、Autocomplete、Datepicker和Select。這些控制項在Angular有一些特點,就是它們都會使用一個
前幾天我們介紹了幾個Angular Material常見的文字型表單欄位控制項,如Input、Autocomplete、Datepicker和Select。這些控制項在Angular 有一些特點,就是它們都會使用一個<mat-form-field>元件包起來,這個元件到底是有什麼能耐,讓這些表單欄位都離不開它呢?就讓我們繼續看下去吧!
簡介Angular Material的Form Field<mat-form-field>被用來包住幾個常見的文字欄位,並根據「Material Design中的text fields設計指南」[1]來提這些欄位加上如底線、label和提示訊息等功能能,並符合Material Design中的建議,讓我們不需要重新造輪子,就能用一致的顯示方式來打造我們的介面!
下面幾種功能在設計上都能夠搭配<mat-form-field>使用
<input matInput>和<textarea matInput> <mat-select> <mat-chip-list>:我們會在未來的文章中繼續介紹接下來我們所提到的每個form field的功能,在以上3種狀況下,都可以使用。
Form Field功能介紹要使用<mat-form-field>必須加入MatFormFieldModule,在之前的文章我們也應該都已經加入了!
設定float label在Material Design中針對這些輸入型的欄位有個很特殊的設計,稱之為floating label,也就是我們常用的label位置可以放在input裡面,像是placeholder一樣,如下圖:
當元件被focus的時候,這個label會自動浮到上面去,如下
也因此在Angular Material中,我們不需要特別去加一個<label>,直接設定placeholder屬性即可,它同時就兼具了placeholder和...