1。组件中定义两个变量,分别用于控制按钮是否可以点击(倒计时)和按钮上的倒计时数字(countDownTime):
倒计时=false; countDowmTime=60;//这里设置倒计时为60年代 showButtonText='发送短信验证码”;//可以控制动态改变的按钮提示信息
2。写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上:
getCode(事件){ this.validateForm1.controls['电话'].markAsDirty ();//点击获取验证码要以输入了手机号为前提 this.validateForm1.controls['电话'].updateValueAndValidity (); this.userProvider。doSendSMS({电话:this.validateForm1.controls.phone。值})。订阅(res=祝辞{//如果手机号验证通过 如果(res) { this.notice.success(“短信验证码已发送!”); this.sendMessage ();//调用下面的按钮倒计时的方法 } }); } sendMessage(){//发送了短信验证码后触发本方法,开始倒计时 这一点。倒计时=true;//发送验证码后一分钟内,按钮变成不可点击状态 这一点。showButtonText='验证码已发送(' + 60 +的);//验证码发送后的初始状态 const开始=setInterval(()=比;{ 如果这一点。countDownTime祝辞=0){ 这一点。showButtonText='验证码已发送(' +。countDownTime——+ ' s);//动态的进行倒计时 其他}{ clearInterval(开始);//如果超时则重新发送 这一点。showButtonText='重新发送的; 这一点。倒计时=false;//按钮再次变成可点击状态 这一点。countDownTime=60; } }, 1000); } >之前3。页面上用方法中的变量来控制按钮的显示效果:
& lt; div比; & lt;按钮nz-button(残疾人)=暗辜剖薄?单击)=癵etCode(事件)美元”在{{showButtonText}} & lt;/button> … & lt;/div> >之前以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
Angular6发送手机验证码按钮倒计时效果实现方法