本文共 1969 字，大约阅读时间需要 6 分钟。

准备

新建页面

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

跳转

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

   
        跳转到form页面
   

创建表单信息的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用于显示保单信息

页面展示peopleInfo

{
  {peopleInfo|json}}

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

单行文本框ion-input

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

     
    
     用户名
      
    
   
     
    
     年龄
      
    
   

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

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

开关ion-toggle

     
    
     是否本科
      
    
   

我们使用ion-toggle组件来实现开关的功能，然后用[(ngModel)]来实现双向数据绑定

当这个值为true时，开关打开；当这个值为false时，开关关闭

打开：

关闭：

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

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

       
          
             
            
           
     
      支付宝支付
           
         
        
          
             
            
           
     
      微信支付
           
         
    
   

这段代码中，ion-radio-group包裹在外面，里面有支付宝支付和微信支付两种支付方式；

每个选项中由图像、文字和选择构成； ion-radio中slot属性决定勾选是在做还是由，value属性决定选项值； 最后ion-radio-group用[(ngModel)]来进行双向数据绑定，当勾选哪个ion-radio则这个单选按钮组的值则为该ion-radio的value值

选择支付宝支付：

选择微信支付：

多选按钮ion-checkbox

     
      
    
     {
  {item.val}}
    
   

代码中我们循环peopleInfo.checkBoxList来创建几个多选按钮；

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

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

    
    
     选择城市
      
        
     
      {
  {item}}
       
    
   

这段代码中使用ion-select、ion-select-option来实现下拉框功能；

ion-select中使用[(ngModel)]="peopleInfo.city"来双向绑定peopleInfo.city； ion-select-option循环peopleInfo.cityList创建不同的选项；

多行文本框 ion-textarea

      
          
     
      备注
           
         
    
   

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

转载地址：https://blog.csdn.net/u010574271/article/details/115558709 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！