title: How to hide input with Angular
body: <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/GXehX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GXehX.png" alt="my app"></a></p>
  
  <p>I tried to use</p>
  
  <pre><code>&lt;input hidden type="text" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;input type="hidden" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;input type="text" style="display:none" id="cardNumber" formControlName="cardNumber" [(ngModel)]="refresh"&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>document.getElementById("cardNumber").focus();
  </code></pre>
  
  <p>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.</p>