Ionic angular ngModel not displaying value

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



  }
}

According to the documentation here and as understand you can call your function with event Listener like that :

  constructor() {
document.addEventListener('onSMSArrive', function(e) {
    console.log('onSMSArrive()');
    var IncomingSMS = e.data;
    console.log('sms.address:' + IncomingSMS.address);
    console.log('sms.body:' + IncomingSMS.body);
    this.processSMS(IncomingSMS) ;  ///// ========>>> here you call your function after receiving the sms 


    /* Debug received SMS content (JSON) */
    console.log(JSON.stringify(IncomingSMS));
});

 }

I home this reply help u to resolve your problem.
if not try to read the documentation of plugin.
Happy coding :wink:

How this makes any difference? I tried not working

Listening to detectChanges solved the problem

1 Like