Search code examples
angularhidden-field

How to hide input with Angular

I'm using an usb card reader with my application to fill an input form. I'm trying to hide it and be able to badge with my card to send the form.

my app

I tried to use

<input hidden type="text" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">

and

<input type="hidden" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">

and

<input type="text" style="display:none" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh">

But as soon as the element disappear I'm unable to fill it with the card. I make sure the focus is always present by using

document.getElementById("cardNumber").focus();

I don't understand how angular treats in the DOM all hidden elements? But it looks like I can reach it but not use it.

Solution

  • You can even use

    class="cdk-visually-hidden"

    Documentation