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

}