ionic5錶單輸入框和單選按鈕

kenick 2022-06-23 09:08:48 阅读数:800

ionic5ionic

頁面效果

html文件

 <ion-list>
<div>
<ion-input type="text" value="" maxlength="30" placeholder="請輸入二級分銷手機號(已注册)" [(ngModel)]="phone"></ion-input>
</div>
<ion-radio-group [(ngModel)]="operate" >
<ion-list-header>
<ion-label>請單擊下面選項:</ion-label>
</ion-list-header>
<ion-item>
<ion-label>授權分銷</ion-label>
<ion-radio slot="start" value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>取消分銷</ion-label>
<ion-radio slot="start" value="0"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

ts文件

export class DistributionPage implements OnInit {
public phone: any;
public operate:1;
constructor(
public router: Router,
public httpUtil: HttpUtil,
public commonService: CommonService,
public commonUtil: CommonUtil
) {
}
ngOnInit() {
}
ionViewWillEnter() {
}
grantSecondDistribution(){
console.trace("grantSecondDistribution.in,phone:"+this.phone+",operate:"+this.operate);
}
}

版权声明:本文为[kenick]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/174/202206230902016054.html