QR code scanner for ionic project for auto filling the form details

Ionic Framework ionic-v3
1

Iam newbie to ionic and creating a basic mobile app after learning ionic online.

I had created a customer details form page where customers need to enter their details like, name, gender, dob, city etc.

Instead of manually entering the entering the details, I want to put QR Scanner in the page so that when Aadhaar or any other barcode details saver QR code gets scanned the customer details needs to gets filled automatically.

Below is the code

    <ion-content>
    <ion-item>
    <ion-label position="floating" >Full Name</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >DOB</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >Gender</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >Address</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >State</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >District</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >City</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>
<ion-item>
    <ion-label position="floating" >Postal Code</ion-label>
    <ion-input type="text" ></ion-input>
</ion-item>

I tried installing the ionic qr scanner plugins

ionic cordova plugin add cordova-plugin-qrscanner
 npm install @ionic-native/qr-scanner

But no idea how to proceed further. Please help me on this, i got struct on this from last 10 days Thank you

2

Ok, this is more simpler than you think. I just did this a few days ago. Personally, none of the actual qr-scanner plugins worked for me. I instead used barcode scanner which also scans qr code.

So, first step is to put the below plugin in your package.json in dependencies section.

"@ionic-native/barcode-scanner": "^4.20.0",

and do an npm install. Let me know when it’s done.

3

Hi@vivek-23, thank you for your response. I tried your suggestion of adding json dependencies but still iam to get the details of scanned barcodes or qr codes and also how can the details gets auto filed in the form after scanning the barcode or qrcode.
Please help me on this.

Thank you.

4

Ok, I am assuming you have installed the plugin by doing npm install. Auto filling the fields is easy. Next step is to scan the QR Code and print on console.

You can refer the docs from the below link. Ignore the version there.