0

Below is the html, to scan the bar-coder and the same will assign to barCodeNumber variable, onChange() function will call once the bar-coder scanned,

Question:- I want to hide the div from UI, but the function should work, even div is not visible.

I tried using "visibility: hidden" in scss style class, but the function is not working.

<div class="mt-5">
    <div class=" flex flex-row align-content-center justify-content-between row-gap-6 card-container">
        <form>
                <input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="barCodeNumber"
                    autofocus="true" placeholder="Enter/Scan RFID" (change)="mappingFunction($event)">
            </form>
    </div>
</div>

below is .ts file:

mappingFunction(event){
console.log('Event print', event);
}
sanjai
  • 128
  • 1
  • 1
  • 13

2 Answers2

1

Have a look here: Angular Reactive forms : change vs valueChanges

tldr:

  • (change) is called when blured away (which doesn't happen if it's hidden)
  • valueChanges is called every time and as soon as the value changes.

Also there is a special type of input that's hidden

<input type="hidden" ... >
berse2212
  • 464
  • 5
0

You can "get out" from view the input

style {
   position:absolute;
   top:-3rem;
}
Eliseo
  • 50,109
  • 4
  • 29
  • 67