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