Ionic angular ngModel displaying value

@Pratikjaiswa15 wrote:

I am going through a strange issue. I am using SMS receiver plugin to read otp and auto-fill it without any user interaction.

But when I fetch otp from the message it is not getting displayed even though I have used ngModel for it.

If I manually change the value in ngOnint() it is getting displayed on view, but it is not working inside SMS receive function.

I have checked console.logs the value is there.

The start() function in the following code is called after the message is sent.
Thank you in advance

.html

<ion-row class="OTP-border">
          <ion-col>
            <div>
              <ion-input  type="tel" maxlength="1"  [(ngModel)] ="otpArray.first" >
              </ion-input>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-input  type="tel"  maxlength="1" [(ngModel)] ="otpArray.second" >
              </ion-input>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-input  type="tel"  maxlength="1" [(ngModel)] ="otpArray.third" >
              </ion-input>
            </div>
          </ion-col>
          <ion-col>
            <div>
              <ion-input  type="tel"  maxlength="1" [(ngModel)] ="otpArray.fourth" >
              </ion-input>
            </div>
          </ion-col>
        </ion-row>
.

.ts

otpArray : any = {
    first : '',
    second : '',
    third : '',
    fourth : '',
 }


start() {
  SMSReceive.startWatch(
    () => {
      console.log('watch started');
      document.addEventListener('onSMSArrive', (e: any) => {
        console.log('onSMSArrive()');
        var IncomingSMS = e.data;

        this.processSMS(IncomingSMS);
      });
    },
    () => { console.log('watch start failed') }
  )
}

processSMS(data) {

  const message = data.body;
  if (message) {
    this.otpArray.first = data.body.slice(0, 1);
    this.otpArray.second = data.body.slice(1, 2);
    this.otpArray.third = data.body.slice(2, 3);
    this.otpArray.fourth = data.body.slice(3, 4);


    console.log("otp")
    console.log(this.otpArray.first); // output 1
    console.log(this.otpArray.second); // output 2
    console.log(this.otpArray.third); // output 3
    console.log(this.otpArray.fourth); // output 4



  }
}

Posts: 1

Participants: 1

Read full topic