<ion-item>
<ion-input clearInput [(ngModel)]=‘code‘ placeholder=‘請輸入驗證碼‘></ion-input>
<button clear ion-button class="i" item-end (tap)="getCode()" [disabled]="!verifyCode.disable">
{{verifyCode.verifyCodeTips}}
</button>
</
 
ion-item>

要點：[disabled]="!verifyCode.disable" 為true時才會允許點擊

3.demo.ts文件

import { Component } from ‘@angular/core‘;
import { NavController, NavParams } from ‘ionic-angular‘; 


@Component({ 
selector: ‘page-forget‘, 
templateUrl: ‘forget.html‘, 
}) 
export class ForgetPage { 

codeParam = {
    fromflag: 
 
2,
    usertel: "130123123"
  }
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,

  }

  ionViewDidLoad() {
    console.log(‘ionViewDidLoad RegisterpasswordPage‘);
  }
// 驗證碼倒計時
verifyCode: any = {
  verifyCodeTips: "獲取驗證碼",
  countdown: 60,
  disable: true
}
// 倒計時
settime() {
  
 
if (this.verifyCode.countdown == 1) {
  this.verifyCode.countdown = 60;
  this.verifyCode.verifyCodeTips = "獲取驗證碼";
  this.verifyCode.disable = true;
  return;
  } else {
  this.verifyCode.countdown--;
  }

  this.verifyCode.verifyCodeTips = "重新獲取(" + this.verifyCode.countdown + ")";
  setTimeout(() => {
  this.verifyCode.verifyCodeTips = "重新獲取(" + this.verifyCode.countdown + ")";
  this.settime();
  }, 1000);
}
getCode() {
  if (this.codeParam.usertel == ‘‘) {
  console.debug("請填寫手機號!");
  return;
  }
  else{
  let alert = this.alertCtrl.create({
    title: ‘提示‘,
    subTitle: ‘驗證碼發送成功，請註意查收！‘,
    buttons: [‘確定‘]
  });
  alert.present();
  
  //發送驗證碼成功後開始倒計時

  this.verifyCode.disable = false;
  this.settime();
}
}

ionic typescript--驗證碼發送功能