material2输入组件的使用方法

Question

我在 material 文档中看到了支持的输入类型

以下输入类型可与 md-input-container 一起使用：
- 日期
- 本地日期时间
- 电子邮件
- 月
- 人数
- 密码
- 搜索
- 电话
- 文字
- 时间
- url
- 周

但是我只是看到mdInput或者textarea怎么用，想知道其他类型的输入组件怎么用

Answer 1

这些是可以应用的标准 HTML5 <input> types on which the mdInput 指令。您列出的 <input> 类型的使用方式与 type="text" 的使用方式相同。

这些控件的显示方式和渲染后的行为取决于所使用的浏览器。例如 type="date" 将在较新的浏览器中显示日期选择器。

MDN Form <input> types 简单示例

日期

date: HTML5 A control for entering a date (year, month, and day, with no time).

<md-input-container>
    <input mdInput 
        type="date"
        ...>
</m-input-container>

本地Date/Time

datetime-local: HTML5 A control for entering a date and time, with no time zone.

<md-input-container>
    <input mdInput 
        type="datetime-local"
        ...>
</m-input-container>

电子邮件

email: HTML5 A field for editing an e-mail address.

<md-input-container>
    <input mdInput 
        type="email"
        ...>
</m-input-container>

月

month: HTML5 A control for entering a month and year, with no time zone.

<md-input-container>
    <input mdInput 
        type="month"
        ...>
</m-input-container>

人数

number: HTML5 A control for entering a number.

<md-input-container>
    <input mdInput 
        type="number"
        ...>
</m-input-container>

密码

password: A single-line text field whose value is obscured.

<md-input-container>
    <input mdInput 
        type="password"
        ...>
</m-input-container>

搜索

search: HTML5 A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.

<md-input-container>
    <input mdInput 
        type="search"
        ...>
</m-input-container>

电话

tel: HTML5 A control for entering a telephone number. Line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control.

<md-input-container>
    <input mdInput 
        type="tel"
        ...>
</m-input-container>

文字

text: A single-line text field. Line-breaks are automatically removed from the input value.

<md-input-container>
    <input mdInput 
        type="text"
        ...>
</m-input-container>

时间

time: HTML5 A control for entering a time value with no time zone.

<md-input-container>
    <input mdInput 
        type="time"
        ...>
</m-input-container>

URL

url: HTML5 A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. You can use attributes such as pattern and maxlength to restrict values entered in the control.

<md-input-container>
    <input mdInput 
        type="url"
        ...>
</m-input-container>

周

week: HTML5 A control for entering a date consisting of a week-year number and a week number with no time zone.

<md-input-container>
    <input mdInput 
        type="week"
        ...>
</m-input-container>

material2输入组件的使用方法

how to use material2 input component

angular-material2

angular