Ionic4.x 中的 UI 組件(UI Components)表單相關組件

1、ion-input 單行文本框

 

2、ion-toggle 開關

 

3、ion-radio-group、ion-radio 單選按鈕組

 

4、ion-checkbox 多選按鈕組

 

5、ion-select 選擇框

 

6、ion-textarea 多行文本框

 

<ion-list>
  <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-list>
<ion-item>
  <ion-label>是否本科</ion-label>
  <ion-toggle slot="end" [(ngModel)]="peopleInfo.falg"></ion-toggle>
</ion-item>
<ion-list>
  <ion-radio-group [(ngModel)]="peopleInfo.payType">
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/alipay.png"> </ion-avatar>
      <ion-label>支付寶</ion-label>
      <ion-radio value='1' slot="end"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/weixinpay.png"> </ion-avatar>
      <ion-label>微信</ion-label>
      <ion-radio value='2' slot="end"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>
<ion-list>
  <ion-item *ngFor="let item of peopleInfo.checkBoxList">
    <ion-label>{{item.val}}</ion-label>
    <ion-checkbox slot="start" [(ngModel)]="item.isChecked"></ion-checkbox>
  </ion-item>
</ion-list>
<ion-list>
  <ion-select slot="end" [(ngModel)]="peopleInfo.city">
    <ion-select-option *ngFor="let item of peopleInfo.cityList" [value]="item">{{item}}</ion-select-option>
  </ion-select>
</ion-list>
<ion-list>
  <ion-item>
    <ion-textarea [(ngModel)]="peopleInfo.info"></ion-textarea>
  </ion-item>
</ion-list>