ionic组件-form表单

本节知识点：Ionic之form表单实现MVVM，模拟数据提交或信息注册案例。

效果展示：

【ion-input】单行文本框

  <ion-item-divider>
    <ion-label>用户基本信息</ion-label>
  </ion-item-divider>
  <ion-item>
    <ion-label>姓名：</ion-label>
    <ion-input type="text" placeholder="请输入您的姓名" [(ngModel)]="peopleInfor.username"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>年龄：</ion-label>
    <ion-input type="number" placeholder="请输入您的年龄" [(ngModel)]="peopleInfor.age"></ion-input>
  </ion-item>

【ion-toggle】开关

  <ion-item>
    <ion-label> 是否本科 </ion-label>
    <ion-toggle color="primary" [(ngModel)]="peopleInfor.flag"></ion-toggle>
  </ion-item>

【ion-radio】单选按钮：快捷键ion-radio-group

注意：ion-radio（单选按钮）需配合ion-radio-group使用

  <ion-list>
    <!--注意：单选按钮组的双向数据绑定需绑定在整体的标签上-->
    <ion-radio-group name="auto" value="1" [(ngModel)]="peopleInfor.paytype">
      <ion-list-header>
        <ion-label>支付方式</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-avatar slot="start">
          <img src="assets/icon/Alipay.png" />
        </ion-avatar>
        <ion-label>支付宝支付</ion-label>
        <ion-radio value="1"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-avatar slot="start">
          <img src="assets/icon/wepay.png" />
        </ion-avatar>
        <ion-label>微信支付</ion-label>
        <ion-radio value="2"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>

【ion-checkbox】多选按钮

  <ion-item-divider>
    <ion-label>兴趣爱好</ion-label>
  </ion-item-divider>
  <ion-item *ngFor="let item of peopleInfor.checkbox">
    <ion-checkbox slot="start" [(ngModel)]="item.isChecked"></ion-checkbox>
    <ion-label >{{item.value}}</ion-label>
  </ion-item>

【ion-select】下拉选项框

属性【okText=" " cancelText=" "】：修改下拉选项框弹出后的按钮内容；

效果展示：

 

    <ion-item>
      <ion-label>请选择城市</ion-label>
      <ion-select okText="确定" cancelText="取消" [(ngModel)]="peopleInfor.city">
        
        <ion-select-option  [value]="item" *ngFor="let item of peopleInfor.citylist"> {{item}} </ion-select-option>
      </ion-select>
    </ion-item>

属性【multiple="true"】：multiple的属性值为"true"时，当可将单选下拉列表修改为多选；

效果展示：

    <ion-item>
      <ion-label>请选择城市</ion-label>
      <ion-select multiple="true" okText="确定" cancelText="取消" [(ngModel)]="peopleInfor.city">
        
        <ion-select-option  [value]="item" *ngFor="let item of peopleInfor.citylist"> {{item}} </ion-select-option>
      </ion-select>
    </ion-item>

【ion-textarea】多行文本

    <ion-list>
      <ion-item>
        <ion-textarea placeholder="请输入备注信息" [(ngModel)]="peopleInfor.info"></ion-textarea>
      </ion-item>
    </ion-list>

【数据来源：文件form.page.ts】

  //提前定义好一个数据，用来实现表单的双向数据绑定
  public peopleInfor:any={
    username:'',
    age:24,
    flag:true,
    paytype:'1',
    checkbox:[
      { value:'芒果',isChecked:true },
      { value:'草莓',isChecked:false },
      { value:'苹果',isChecked:false }
    ],
    citylist:['北京','上海','重庆'],
    city:'重庆'
  }