[Angular Material完全攻略] Day 10 | angular material input
接下我們要來介紹幾個在MaterialDesign中屬於Input,也就是文字輸入欄位相關的功能,文字輸入也可以說是表單裡面最常使用到的欄位!接下來就來看看AngularMaterial的Input、Autocomplete!!MaterialDesign中的文字輸入欄位在MaterialDesign的文字欄位設計指南[1]中,文字欄位就是提供使用者輸入文字的一個空間,通常在表單中最常被使用,當然像是其他一些如搜尋功能等也很會出現,文字欄位必須要能提供驗證使用者輸入的資訊的功能,來幫助使用者修正問題,另外也能提供一些自動完成的功能,以提供使用者相關的建議。文字欄位可以是單...
接下我們要來介紹幾個在Material Design中屬於Input,也就是文字輸入欄位相關的功能,文字輸入也可以說是表單裡面最常使用到的欄位!接下來就來看看Angular Material的Input、Autocomplete!!
Material Design中的文字輸入欄位在Material Design的文字欄位設計指南[1]中,文字欄位就是提供使用者輸入文字的一個空間,通常在表單中最常被使用,當然像是其他一些如搜尋功能等也很會出現,文字欄位必須要能提供驗證使用者輸入的資訊的功能,來幫助使用者修正問題,另外也能提供一些自動完成的功能,以提供使用者相關的建議。
文字欄位可以是單行或是多行,如果需要的話也要提供能隨著行數增加和自動增加的功能。
另外,文字欄位也要能限制輸入的格式,或是提供選項來選擇。
開始使用Angular Material的Input要使用Input相關的功能,首先得先加入MatInputModule。另外,部分的表單控制項,都需要搭配另一個元件-FormField來使用,因此我們也要加入MatFormFieldModule。關於FormField元件,目前只需要簡單使用就好,細節的操作會在後續的文章做詳細的說明。
使用matInputmatInput是一個依附於input和text的表單基本元件上的directive,因此我們只需要在input或textarea中加入matInput這個directive,即可替元件加上基本的Material Design樣式,不過為了讓input和textarea能更加具有意義,我們會在外面用<mat-form-field>包起來,這個<mat-form-field>可以替input和textarea等元件加上更有意義的訊息,讓操作上更加容易。
<div> <mat-form-field> <input type="text" name="nickname" matInput placeholder="暱稱" /> <...