Barcode scanner with morethan one field

Ionic Framework ionic-v3
1

%5E8CB8E0331B9895D1BAB98D92E64C17EE9C1809859D3EB338C0%5Epimgpsh_fullsize_distr
^8CB8E0331B9895D1BAB98D92E64C17EE9C1809859D3EB338C0^pimgpsh_fullsize_distr.jpg1200Ă—684 58 KB

My barcode scanner plugin Typescript file

   scanBarCode() {
        this.barcodeScanner.scan().then(barcodeData => {
          this.scannedbarCode = barcodeData.text;
        }, (err) => {
            console.log('Error: ', err);
        });
      }

clearbar(){

  this.scannedbarCode= null;
}

My HTML side of barcode scanner

 <ion-item *ngIf='item.datatype == "barcode"'>
         <ion-label  floating><b>{{item.label}}</b></ion-label>
           <button  ion-button small item-right color="primary" (click)="scanBarCode()">Scan Barcode</button>
           <button  ion-button small item-right color="danger" (click)="clearbar()">Clear</button>   
           <ion-input type="text" value={{scannedbarCode}}></ion-input>       
       </ion-item>

If i scanned barcode one the same value comes on the second barcode value.Is there is any to avoid these using anything inside ionic expression.The barcode field is generated dynamically according to data type “barcode”.

If two field comes with data type "barcode " it will generate two fields like above.The problem is the is if i scanned one field the value apply simultaneously to all other field

2

I guess you are using an ngFor to iterate over a result from an API call and create those fields dynamically, right?

In that case I would recommend to add an index to your iteration and then store the barcodes when scanned inside an array/object through which you can access the right barcode for the right field.

Your inout value for the field would then also be retrieved from the array[index] so you can have as many dynamic fields as you wish!

1 Like
3 
scanBarCode(order) {
    this.barcodeScanner.scan().then(barcodeData => {

      for(var i=0;i<this.main2.length;i++){

        if(this.main2[i].order == order){
         
           this.main2[i].scannedBarCode = barcodeData.text;
           break;

       }

    }

    }, (err) => {
        console.log('Error: ', err);
    });
  }

<ng-template ngFor let-item [ngForOf]="main2">
   <ion-item *ngIf='item.datatype == "barcode"'>
         <ion-label  floating><b>{{item.label}}</b></ion-label>
           <button  ion-button small item-right color="primary" (click)="scanBarCode(item.order)">Scan Barcode</button>
           <button  ion-button small item-right color="danger" (click)="clearbar(item.order)">Clear</button>   
           <ion-input type="text" value="{{item.scannedBarCode}}"></ion-input>       
       </ion-item>
</ng-template>

i solved this issue like you said