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