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;
  }

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;
  }

• javascript
• html
• typescript
• ionic-framework

1 Answer 1

Well, OTP is a string. But, you are binding indices of it (OTP[0], OTP[1], etc.) to a field, so when the user types into it, Angular would try to assign the new value to OTP[0], etc. But: You cannot assign to string indices. Try OTP = ''; OTP[0] = 'a' in the console and you'll get the same error, because strings are primitive values and not mutable.

It would work if you'd use an array as OTP. Like, OTP = otpString.split(''). Then it will work. Later, you can use otpString = OTP.join('') to get back a string.

Assuming that you'd have "123456" in a variable otpString, then doing OTP = otpString.split('') would give an array ["1", "2", "3", "4", "5", "6"]. This way, assigning works (you can write OTP[0] = 'a' with an array just fine).