ionic5.x表单相关组件 ion-input、 ion-toggle 、ion-radio 、ion-checkbox、ion-textarea

下面我们看看ionic5.x表单相关组件 ion-input、 ion-toggle 、ion-radio 、ion-checkbox、ion-textarea的使用，以及获取ion-input、 ion-toggle 、ion-radio 、ion-checkbox、ion-textarea的值。

1、ionic5.x表单相关组件 ion-input单行文本框双休数据绑定

 <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>

2、ionic5.x表单组件ion-toggle开关组件双休数据绑定

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

3、ionic5.x表单组件 ion-radio-group、ion-radio 单选按钮组

<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>

4、ionic5.x表单组件  ion-checkbox 多选按钮组

<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>

5、ionic5.x表单组件 ion-select 选择框   

 <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>

6、ionic5.x表单组件 ion-textarea 多行文本框 

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

这就是ionic5.x表单相关组件 ion-input、 ion-toggle 、ion-radio 、ion-checkbox、ion-textarea的使用方法,ionic5.x表单相关组件 ion-input、 ion-toggle 、ion-radio 、ion-checkbox、ion-textarea就给大家先介绍到这里，希望对你有帮助

更多ionic5.x表单相关组件 ion-input、 ion-toggle 、ion-radio 、ion-checkbox、ion-textarea的使用教程：https://www.itying.com/goods-1067.html