I hope someone can answer me, I need help with this and I can not solve it
Well, it turns out that I have a form where an OTP code is entered, which the user received in his cell phone number, when he finishes entering the phone number, the api request should be called that validates if the number and the otp are correct, without the need for the user to click on a button, if not, I do it automatically, but with this several things happen:
- I implemented the library
ng-otp-input
( https://www.npmjs.com/package/ng-otp-input ) and the disadvantage is that since it receives a click event(onInputChange)="onOtpChange($event)"
to get what is written in the input, in my logic, I thought it would be good to do the api request that verifies the OTP code from there. - But since it is a click event that detects the value entered in the input, the request is made every time a number is entered in the aforementioned input, which means that the request is being called several times and that could do some kind of traffic.
So what are the requirements?
- That the API request automatically calls the request once the changes are completed without the need to do it through a button that performs the action
Here is the implemented code:
Clik event of the input box that receives the code
onOtpChange(otp: string) {
this.otp = otp;
this.cellPhone = this.bookingService.bookingModel.patient?.phone?.e164Number
// this.verificado = true;
if (this.cellPhone && this.otp) {
this.bookingService.checkOtpCode(this.cellPhone, this.otp).subscribe(res => {
//Si la respuesta de la api ha salido bien
if (res) {
this.verificado = true;
setTimeout(() => {
this.dialogRef.close(true);
}, 2000);
}
// else {
// this.later = true;
// }
})
}
}
HTML where the click event is called:
<div class="otp">
<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" [config]="config"></ng-otp-input>
</div>
In advance thank you very much for your help, I really need if someone can explain to me
You can use a reactive form and listen for changes and status to trigger some action.
And this would be your html.
I leave you a working example here
Other ways without using that library!!
to which you subscribe and when the form is valid emit its value
From the code we simply do
I tried the code in a project without a submit button and it works perfectly in this case it takes me to a select project route that loads correctly when the form has all its valid fields showing the console GO to another route when status is: VALID does not It should be difficult to use this method since you can go to any route when subscribing with statusChanges both with individual controls and using the whole statusChanges tutorial form