Bar code scanner with more than one field

Ionic Framework ionic-v3
1

I’m trying to use the barcode scanner plugin.
I have more than one field that receives the scanned value, and the amount of these fields can vary (1, 2, 3 fields …), depending on the configuration the user selects.

My problem is knowing which field called the scanner to fill the scanned value back, because the scan() method is asynchronous.

I tried to pass to the scanner plugin a parameter that indicates the field being scanned at the moment, however, I could not find that option. I also tried to run the scan() method synchronously (as in this post ), but the scanner does not open.
Does anyone have another solution?

2

Hi,

so far I undestood you have a page with let’s say input field. Do you have a scan button for each input field or do you have just one scan button for all input fields?
If one per input you can handle it in the callback of scan().
if you have one scan() for all input field, how would you assign from a user perspective the code to the input? assign it by the focus? if so, you must save in a variable which input field is focused and then in the scan() callback save the result in the focused field…

Maybe I just understood you wrong. can you maybe give more details, or even code…

3

I’m sorry for the delay in replying. I had another problem in the app …

I have one scanner button per field.

I solved the problem as you suggested, but using LocalStorage:

<ion-item *ngFor="let tag of tagFields" >
      <ion-label stacked>{{tag.label}}</ion-label>
      <ion-input formControlName="{{tag.name}}" type="text" clearInput text-uppercase></ion-input>
      <button ion-button outline item-right icon-only (click)='startScan(tag.name)'>
        <ion-icon name="barcode"></ion-icon>
      </button>
</ion-item>

startScan(inputFieldName: string) {
    localStorage.setItem(NewColetaPage.fieldBeingScanned, inputFieldName);
    this.scanner.scan()
      .then((scannedData) => {
        let scannedInputField = localStorage.getItem(NewColetaPage.fieldBeingScanned);
        this.coletaForm.controls[scannedInputField].setValue(scannedData.text);
      }, error => { 
        this.handleScanError(); })
      .catch(() => { 
        this.handleScanError(); });
}

I tried to use the local variable, but its value is lost due to the asynchronous call context.

4

This makes no sense to me. There is no need to resort to using localstorage here.

5

Researching a litle more, I found a better solution with NgZone :

  startScan(inputFieldName: string) {
      this.scanner.scan()
        .then((scannedData) => {
          this.myZone.run(() => {
            this.coletaForm.controls[inputFieldName].setValue(scannedData.text);
          });
        }, error => {
          this.handleScanError();
        })
        .catch(() => {
          this.handleScanError();
        });
    }

Thanks rapropos and hako, for the help!

6

There also should not be any need to manually deal with zones.