本系列文集：来扯点ionic3

表单几乎是每一个应用程序中必不可少的一部分，在各类 HTML 教材中，表单也经常被拿出来作为独立一章来讲解，在 ionic 中，不直接使用 input 标签编写表单控件，而是有专门为仿真原生 ios/android 系统的表单组件。

在 ionic 中制作表单，需要列表的配合，列表的使用可参阅下文：

来扯点ionic3[4] 结构型指令和列表渲染

下面就来介绍一些表单组件的使用：

组件概览

文本输入：Input 组件

基本使用

<ion-list>
    <ion-item>
      <ion-label>标签</ion-label>
      <ion-input type="text" value=""></ion-input>
    </ion-item>
 </ion-list>

且注意 ion-input 是有结束标签的，并非 input 一样的单标签。

type属性

type 属性与 html 中 input 标签的 type 属性是类似的，可以使用 text、password 这类值，但是不支持 radio、checkbox 等非文本输入的类型。

值得一提的是，在移动应用开发时，input的type和其调出的手机键盘是紧密相连的，因此在开发时应该根据input的实际功能，细致地区分它们的 type，你也可以利用它们来验证这些值的合法性，常用的有：email、tel、url、number

tel

url

email

此外，如果你需要不带任何符号的纯数字键盘，可以用 pattern 属性用正则表达式将输入的内容限定位纯数字

<ion-input type="number" pattern="[0-9]*" value=""></ion-input>

Label 样式

ionic内置了几种 label 的展现样式，你可以像这样来定义它：

<ion-label>website</ion-label>
<ion-label fixed>Website</ion-label>
<ion-label stacked>Website</ion-label>
<ion-label floating>Website</ion-label>

不同的 label 样式

fixed 和默认的区别在于，默认仅仅是把标签和控件排在一行内，而 fixed 固定了标签的宽度，使用了 fixed 能让表单更整齐。

stacked 把标签固定在控件的左上方，使控件可以占据一整行；floating乍一看除了上面多出了一段空白，没有什么特别的地方，但它被激活以后，就会触发动画变成
stacked的样子（这在 Android 的应用中经常出现）。

动图：stacked 和 floating是这么玩的

列表单选：Radio组件

如果说 input 和我们写网页的习惯基本类似，那单选组件可能就不太一样了，毕竟选择操作在传统网页上和移动应用是有非常大的差别的。

基本使用

<ion-list radio-group>
    <ion-list-header>请选择：</ion-list-header>
    <ion-item>
      <ion-label>选项1</ion-label>
      <ion-radio value="1" checked></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>选项2</ion-label>
      <ion-radio value="2"></ion-radio>
    </ion-item>
  </ion-list>

• 在 ion-list 标签上使用 radio-group 指令，表示其内部的 ion-radio 为同一组。
• 借助 ion-list-header 放置这一组选项的标题。

主要属性

与 input[type=radio] 一样，有 checked、disabled和value这三个属性。

Yes or No: Toggle组件

常用于设置页面的开关组件。

基本用法

<ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
  </ion-item>

image.png

主要属性

与 input[type=checkbox] 一样，有 checked、disabled和value这三个属性。

弹框选择：Select组件

在点击控件时，会弹出一个 Alert 模态框。

基本使用

<ion-list>
    <ion-item>
      <ion-label>标签</ion-label>
      <ion-select>
        <ion-option value="1">选项1</ion-option>
        <ion-option value="2">选项2</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

multiple 属性

使用 multiple 属性可将 select 变为多选，这时 select 的值会变成一个数组。

<ion-select multiple="true">

interface 属性

interface属性可以将弹框更为其它的样式，支持 action-sheet 和 popover 两个值，interface 属性不能和 multiple 属性共同使用。

action-sheet 的选择方式

popover 的选择方式

日期/时间选择：Datetime组件

基本使用

<ion-list>
    <ion-item>
      <ion-label>Date</ion-label>
      <ion-datetime displayFormat="MM/DD/YYYY"></ion-datetime>
    </ion-item>
  </ion-list>

displayFormat 属性

displayFormat 定义了日期在控件中以怎样的格式出现，对于国内开发者，常见的格式有：

YYYY 四位数年份 (2017)
MM 月份（01-12）
DD 日期 (01-31)
HH 小时-24小时制（00-23）
hh 小时-12小时制 (01-12)
mm 分钟 (00-59)
ss 秒 (00-59)

官方文档中还提供了更多的格式，可以查阅（链接在文末）。
例如，我们这样定义 displayFormat

<ion-datetime displayFormat="YYYY年MM月DD日 HH:mm"></ion-datetime>

效果是这样的

pickerFormat 属性

pickerFormat规定了日期选择器中的格式。一般情况下，我们不需要定义这一个属性，除非我们希望选择器里的格式和控件内的格式不同，例如，下面这个例子，我们要求用户选择的时间精确到秒，但是控件的显示只精确到分钟。

<ion-datetime displayFormat="HH:mm" pickerFormat="HH mm ss"></ion-datetime>

min 属性和 max 属性

min 和max 可以定义选择器的时间范围，例如下面的例子将时间限定在2016年1月1日到2016年5月30日之间：

 <ion-datetime displayFormat="YYYY-MM-DD" min="2016" max="2016-05-30"></ion-datetime>

范围选择：Range组件

Range组件允许用户通过滑块来选择一个给定范围内的值，默认的范围是0-100。

基本使用

<ion-list>
    <ion-list-header>标题</ion-list-header>
    <ion-item>
      <ion-range pin="true"></ion-range>
    </ion-item>
  </ion-list>

pin 属性

pin 属性规定用户在滑动时，是否在滑块上方显示数字。

Android中带有 pin 的 风格

min 属性和 max 属性

min 和 max 规定了选取区间，即最大值和最小值。

step 属性和 snaps 属性

step 规定了滑块的精度，默认位1，若同时使用了 snaps，则可以在滑轨上标注出每一个 step 的刻度。

<ion-list>
    <ion-list-header>标题</ion-list-header>
    <ion-item>
      <ion-range pin="true" step="5" snaps="true"></ion-range>
    </ion-item>
  </ion-list>

动图：带有 step 和 snaps 的 Range 组件

按钮

按钮和上述控件不同，它不使用 ion-button 来构件，而是使用普通的 button 标签配合 ion-button 指令来实现效果,并且按钮可以不放置在 ion-list 容器中。

基本使用

<button ion-button>按钮</button>

调整颜色

color 属性提供了集中常用的颜色，它们是内置在模板中的，默认值为 primary, 你可以根据业务需要使用其它的值，这些值可以在项目中的 varible.scss 中定制。

  <button ion-button color="primary">primary</button>
  <button ion-button color="secondary">secondary</button>
  <button ion-button color="danger">danger</button>
  <button ion-button color="dark">dark</button>
  <button ion-button color="light">light</button>

调整形状

直接在 button 标签中定义以下指令可以定义按钮的形状：

block 全宽
outline 线框按钮
clear 无背景、无边框（相当于文字按钮）
full 全宽（去除圆角）
round 大圆角
上述几个指令可以根据实际组合使用

 <button ion-button full>full</button>
  <button ion-button full>block</button>
  <button ion-button clear>clear</button>
  <button ion-button round>round</button>
  <button ion-button outline>outline</button>
  <button ion-button round outline>round+outline</button>
  <button ion-button block round>block+round</button>
  <button ion-button full outline>full+outline</button>

image.png

调整大小

large 和 small 两个属性可以定制大号和小号的按钮。

 <button ion-button large>large</button>
  <button ion-button>default</button>
  <button ion-button small>small</button>

提供的参考文档

1. 官方文档：Label
2. 官方文档：Input
3. 官方文档：RadioGroup
4. 官方文档：Toggle
5. 官方文档：Select
6. 官方文档：Datetime
7. 官方文档：Range
8. 官方文档：Button

下一章：来扯点ionic3[6] 继续上手表单：魔法般的双向数据绑定