input from a scan to a form builder in angular

Question

I need to fill in a field of a form builder using the zxing-js library, I am able to read the qrcode and insert this data into the input, but when submitting the field it is blank, if the insertion is from the keyboard everything goes perfectly. .. follow the code snippets

my form:

<form [formGroup]="formulario" (ngSubmit)="submit()" action="#">
  <div class="divEtiqueta">
    <mat-form-field class="inputEtq">
    <input
      formControlName="numRomaneio"
      matInput
      [(ngModel)]="romaneio.id"
      name="name"
      placeholder="Nº Romaneio"
    />
  </mat-form-field>
      <mat-form-field class="inputEtq">
      <input
        matInput
        id="codEtiqueta"
        name="codEtiqueta"
        formControlName="codEtiqueta"
        placeholder="Cód. Etiqueta"
      />
    </mat-form-field>
    </div>
    <section class="container" id="demo-content">
      <div>
        <video
          id="video"
          width="95%"
          height="300"
          style="border: 1px solid gray"
        ></video>
      </div>
      <div class="buttonConfirmar">
        <button
          type="submit" 
          class="btnConfirmar"
          id="confirmarButton"
          mat-raised-button
          onclick="location.href='#'"
        >Confirmar
        </button>
    </div>
    </section>
</form>

my TS:

formulario!: FormGroup;

  romaneio: Romaneio = {
    id: 0,
    status: ''
  }

  idRomaneio!: number;
  
  numcarga!: number;
  id!: string;
  itens!: Item[];
  displayedColumns = ['cod_fab', 'descricao', 'qac', 'qc', 'faltam']

  constructor(private qrcodeapiService: QrcodeapiService, private fb: FormBuilder, private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.formulario = this.fb.group({
      codEtiqueta: ['', Validators.required],
      numRomaneio: ['', Validators.required]
    })
      this.romaneio.id = this.idRomaneio;
  }
  
  buscarItens(){
    this.qrcodeapiService.listar(this.romaneio.id).subscribe(itens =>{
      this.itens = itens
      console.log(itens)
    })
  }
  submit(){
    const formValues = this.formulario.value;
    const etiqueta: Etiqueta = new Etiqueta(formValues.codEtiqueta, formValues.numRomaneio);
    this.qrcodeapiService.salvar(etiqueta).subscribe(etiqueta =>{
      this.qrcodeapiService.showMessage('Registrado')
      this.formulario = this.fb.group ({
        codEtiqueta: ['', Validators.required],
        numRomaneio: this.romaneio.id
      })
      this.buscarItens();
    });
  }

and the script for read QrCode:

 function decodeOnce(codeReader, selectedDeviceId) {
    codeReader
      .decodeFromInputVideoDevice(selectedDeviceId, "video")
      .then((result) => {
        console.log(result);
        document.getElementById("codEtiqueta").value = result.text;
      })
      .catch((err) => {
        console.error(err);
      });
  }

from scan:

From keyboard:

You're storing the QRcode directly in the DOM element, that might not be picked up by Angular change control. — Charlie V, Jun 22 '22 at 18:31
Charlie V you are right, now i'll study how to do this, now i am researching how to change angular control using javascript — Guilherme Marques, Jun 22 '22 at 20:05
I'm using the ```@zxing/ngx-scanner``` package and that works perfectly. — Charlie V, Jun 23 '22 at 06:20

score 0 · Answer 1 · answered Jun 23 '22 at 06:26

Using the @zxing/ngx-scanner package I used it in the (trimmed down) code as below, hope this helps.

html:

<p-card>
  <zxing-scanner [enable]=showScanner
                 [formats]=allowedFormats
                 (scanSuccess)="onScanSucces($event)"
  ></zxing-scanner>
  <label for="first_scan">First Scan</label>
  <input id="first_scan" type="text"
             [value]="firstScanNumber"
             required autofocus disabled>
</p-card>

TS:

export class ScanComponent implements OnInit {

  firstScanNumber: string = "";
  allowedFormats = [ BarcodeFormat.QR_CODE ];

  showScanner: boolean = false;

  constructor() { }

  ngOnInit(): void {
    this.showScanner = true;
  }

  onScanSucces($event: any){
    console.log($event)
    this.firstScanNumber = $event;
    this.showScanner = false;
  }
}

input from a scan to a form builder in angular

1 Answers1