1. Define two variables in the component, which control whether the button can be clicked (countDown) and the countdown number (countDownTime) on the button:
countDown = false; countDowmTime = 60; // Here is the countdown to 60SshowButtonText = 'Send SMS verification code'； // Can control dynamically changed button prompt information
2. Write a method to obtain the SMS verification code and bind it to the page to obtain the SMS verification code button:
getCode(event) {
this.['phone'].markAsDirty(); // Click to get the verification code, the premise is to enter the mobile phone number this.['phone'].updateValueAndValidity();
({ phone: this. }).subscribe(res =>{ // If the mobile phone number is verified if (res) {
('SMS verification code has been sent! ');
(); // Call the following button countdown method
}
});
}
sendMessage() { // This method is triggered after sending the SMS verification code and the countdown begins = true; // Within one minute after sending the verification code, the button becomes unclickable = 'Verification code has been sent (' +60+ 's）'; // The initial state after the verification code is sent const start = setInterval(() = > {
if ( >=0 ) {
= 'Verification code has been sent(' + -- + 's)'; // Dynamic countdown } else {
clearInterval(start); // If timeout, resend = 'Resend'；
= false; // The button becomes clickable again = 60;
}
}, 1000);
}
3. Use variables in the method on the page to control the display effect of the button:
<div style="text-align:center">
<button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button>
.....
</div>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.