Want to hide the input div but not the functionality in angular 14-CodePudding

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 >
    <div >
        <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);
}

CodePudding user response：

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" ... >

CodePudding user response：

You can "get out" from view the input

style {
   position:absolute;
   top:-3rem;
}