ionic5錶單輸入框和單選按鈕

頁面效果

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);
        
    }

}