ionic5 表单相关组件（单行文本框、开关、多选按钮、下拉框、多行文本框）

准备

新建页面

首先，我们项目中新建页面form如下：

跳转

接下来我们在tab1中新建按钮跳转只form页面

<ion-button [routerLink]="['/form']">
    跳转到form页面
</ion-button>

创建表单信息的JSON字符串

我们在form.page.ts中新建peopleInfo用于设置默认表单信息：

public peopleInfo:any={
    username:'',
    age:20,
    flag:true,
    payType:'1',
    checkBoxList:[
      {val:'吃饭',isChecked:true},
      {val:'睡觉',isChecked:false},
      {val:'打豆豆',isChecked:false}
    ],
    cityList:['北京','上海','深圳'],
    city:'北京',
    info:''
  }

页面创建list

在form.page.html中创建list用于显示保单信息

<ion-content>
    <ion-list>
    </ion-list>
</ion-content>

页面展示peopleInfo

{{peopleInfo|json}}

最后可以看到form页面如下：

单行文本框ion-input

首先我们新建用户名和年龄两个文本框

<ion-item>
  <ion-label>用户名</ion-label>
  <ion-input [(ngModel)]="peopleInfo.username"></ion-input>
</ion-item>
<ion-item>
  <ion-label>年龄</ion-label>
  <ion-input [(ngModel)]="peopleInfo.age"></ion-input>
</ion-item>

单行文本框我们用的是ion-input，里面用[(ngModel)]来进行双向数据绑定，刷新后进入页面展示如下

当我们更改用户名和年龄后可以看到结果如下：

开关ion-toggle

<ion-item>
  <ion-label>是否本科</ion-label>
  <ion-toggle slot="end" [(ngModel)]="peopleInfo.flag"></ion-toggle>
</ion-item>

我们使用ion-toggle组件来实现开关的功能，然后用[(ngModel)]来实现双向数据绑定
当这个值为true时，开关打开；当这个值为false时，开关关闭

打开：

关闭：

单选按钮组 ion-radio-group 、ion-radio

单选按钮组这两个组件必须一起用，代表一组选项中进行单选

<ion-radio-group [(ngModel)]="peopleInfo.payType">
    <ion-item>
      <ion-avatar alot="start">
        <img src="assets/alipay.png" />
      </ion-avatar>
      <ion-label>支付宝支付</ion-label>
      <ion-radio slot="end" value="1"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-avatar  alot="start">
        <img src="assets/wechatpay.png" />
      </ion-avatar>
      <ion-label>微信支付</ion-label>
      <ion-radio slot="end" value="2"></ion-radio>
    </ion-item>
</ion-radio-group>

这段代码中，ion-radio-group包裹在外面，里面有支付宝支付和微信支付两种支付方式；
每个选项中由图像、文字和选择构成；
ion-radio中slot属性决定勾选是在做还是由，value属性决定选项值；
最后ion-radio-group用[(ngModel)]来进行双向数据绑定，当勾选哪个ion-radio则这个单选按钮组的值则为该ion-radio的value值

选择支付宝支付：

选择微信支付：

多选按钮ion-checkbox

<ion-item *ngFor="let item of peopleInfo.checkBoxList">
  <ion-checkbox slot="start" [(ngModel)]="item.isChecked"></ion-checkbox>
  <ion-label>{{item.val}}</ion-label>
</ion-item>

代码中我们循环peopleInfo.checkBoxList来创建几个多选按钮；
ion-checkbox中slot=“start” 决定勾选按钮在前面，[(ngModel)]="item.isChecked"实现动态绑定peopleInfo.checkBoxList中每个相应的isChecked，勾选则该值为true，没有勾选则该值为false；
最后{{item.val}}来显示peopleInfo.checkBoxList每个对应的val;

下拉框ion-select、ion-select-option

<ion-item>
 <ion-label>选择城市</ion-label>
  <ion-select [(ngModel)]="peopleInfo.city">
    <ion-select-option *ngFor="let item of peopleInfo.cityList" >{{item}}</ion-select-option>
  </ion-select>
</ion-item>

这段代码中使用ion-select、ion-select-option来实现下拉框功能；
ion-select中使用[(ngModel)]="peopleInfo.city"来双向绑定peopleInfo.city；
ion-select-option循环peopleInfo.cityList创建不同的选项；

多行文本框 ion-textarea

<ion-list>
   <ion-item>
      <ion-label>备注</ion-label>
      <ion-textarea [(ngModel)]="peopleInfo.info"></ion-textarea>
    </ion-item>
</ion-list>

我们使用ion-textarea来实现多行文本框，同时与peopleInfo.info实现双向数据绑定