Ionic build design for enter otp as well as auto fill-otp

@Pratikjaiswa15 wrote:

I have phone auth in my app. We try to auto-fill otp and the user can also fill it manually.

For letting the user type otp manually I have developed keyup function as shown below. And to auto-fill otp used [(ngModel)] to every input field to reflect otp on html

But every time user try type something following error is showing

TypeError: Cannot assign to read-only property '0' of string ''

How to solve the error?

Thank you in advance

.html

<ion-row >
    <ion-col>
     <ion-input class="x" #otp1 required="true" maxLength="1" [(ngModel)] ="OTP[0]" (keyup)="otpController($event,otp2,'')">
     </ion-input>
     <ion-input class="x" #otp2 required="true" maxLength="1" [(ngModel)]="OTP[1]" (keyup)="otpController($event,otp3,otp1)">
     </ion-input>
     <ion-input class="x" #otp3 required="true" maxLength="1" [(ngModel)]="OTP[2]"  (keyup)="otpController($event,otp4,otp2)">
     </ion-input>

     <ion-input class="x" #otp4 required="true" maxLength="1" [(ngModel)]="OTP[3]"  (keyup)="otpController($event,otp5,otp3)">
    </ion-input>

    <ion-input class="x" #otp5  required="true" maxLength="1" [(ngModel)]="OTP[4]" (keyup)="otpController($event,otp6,otp4)">
    </ion-input>

    <ion-input class="x" #otp6  required="true" maxLength="1" [(ngModel)]="OTP[5]" (keyup)="otpController($event,'',otp5)">
    </ion-input>

    </ion-col>
  </ion-row>

.ts

OTP: string = '';

otpController(event,next,prev, index){


    if(index == 6) {
      console.log("submit")
    }
    if(event.target.value.length < 1 && prev){
      prev.setFocus()
    }
    else if(next && event.target.value.length>0){
      next.setFocus();
    }
    else {
     return 0;
    } 
 }

css

.x{
  display:inline-block;
  width:50px;
  height:50px;
  margin:10px;
  border-radius: 50%;
  --background:#e1e1e1;
  --padding-start:7px;
  }

Posts: 1

Participants: 1

Read full topic