Issue
I created a numeric password form using otp input in page 1 and then on page 2 to confirm password. When I route the password from page 1 to page 2 I get the value of the password as undefined and I cannot modify it into a number because it is a string. How can I get the numbers I input into the otp to be able to route it to the second page?
page1.html
<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)"
*ngIf="showOtpComponent" [config]="{length:6,inputClass:'dot',allowNumbersOnly:true}"></ng-otp-input>
<span *ngIf="otp" class="o-t-p"></span>
page1.ts
export class Page1 {
val: any;
otp: string;
showOtpComponent = true;
@ViewChildren('ngOtpInput') ngOtpInput: any;
constructor(public router:Router) { }
ngOnInit() {
}
onOtpChange(otp) {
this.otp = otp;
if (otp.length === 6) {
this.router.navigateByUrl('/page2/' + this.val);
}
}
setVal(val) {
this.ngOtpInput.setValue(val);
}
}
page2.html
<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)"
*ngIf="showOtpComponent" [config]="{length:6,inputClass:'dot',allowNumbersOnly:true}"></ng-otp-input>
<span *ngIf="otp" class="o-t-p"></span>
page2.ts
export class page2 {
val2: any;
val: string;
otp: string;
showOtpComponent = true;
@ViewChildren('ngOtpInput') ngOtpInput: any;
constructor(private activatedRoute: ActivatedRoute, private router: Router, public alertController: AlertController) { }
ngOnInit() {
this.val = this.activatedRoute.snapshot.paramMap.get("val");
console.log(this.val);
}
onOtpChange(otp) {
this.otp = otp;
if (otp.length === 6) {
this.compare();
}
}
setVal(val2) {
this.ngOtpInput.setValue(val2);
}
compare(){
if(this.val != this.val2){
this.presentAlert();
}
else{
this.router.navigateByUrl('/page3');
}
}
async presentAlert() {
const alert = await this.alertController.create({
header: 'Incorrect Password!!',
message: 'Please enter the correct password',
buttons: ['OK']
});
await alert.present();
}
}
Solution
Looking at your code it seems like in your Page1 you're never setting the value of val
, therefore an undefined value is sent over the router.
Assuming you want to send the OTP value to Page2, you should modify your onOtpChange
method in Page1 to the following:
onOtpChange(otp) {
if (otp.length === 6) {
this.router.navigateByUrl('/page2/' + otp);
}
}
Now, in your router (assuming page2 route path is something like page2/:val
), when you log the route param value you should see it properly displayed:
const val = this.activatedRoute.snapshot.paramMap.get("val");
console.log(val);
Answered By - Aziz Yokubjonov
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.