CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
sanjai
sanjai

Reputation: 116

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

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

Upvotes: 0

Views: 130

Answers (2)

Eliseo
Eliseo

Reputation: 57929

You can "get out" from view the input

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

Upvotes: 0

berse2212
berse2212

Reputation: 850

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

Upvotes: 1

Related Questions