CODEWITHSUNDEEP
angularhidden-field
Olivier D'Ancona
Olivier D'Ancona

Reputation: 938

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.

Upvotes: 2

Views: 29694

Answers (3)

Olivier D&#39;Ancona
Olivier D&#39;Ancona

Reputation: 938

You can even use

class="cdk-visually-hidden"

Documentation

Upvotes: 4

dave0688
dave0688

Reputation: 5770

What about hiding the field conditionally?

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

And in your ts something like this: 

hideInput() {
    this.isInputShown = true;
}

hideInput() {
    this.isInputShown = false;
}

And then just call those methods to hide/show.

Upvotes: -1

Sergei Irin
Sergei Irin

Reputation: 121

First of all, you should decide if you are going to hide your input and get it with pure js/html or using Angular capabilities, because the lines of code that you've posted are using vanilla javascript. Going that way you should try adding to the input css style with property visibility: hidden.

To make it hidden using Angular you should bind hidden property using square brackets notation like this: [hidden]="true".

And you should get the element in your code by initializing Angular Form and finding input by formControlName, here are the docs with explicit explanations how to achieve this: https://angular.io/api/forms/Form

If you have only one input and don't want to initialize the whole form for it, you may try to add ElementRef, the code would be something like this:

import {ElementRef} from '@angular/core';
@ViewChild('myInput') inputElement:ElementRef;

ngAfterViewInit() {
      this.inputElement.nativeElement.focus();
}

<input #myInput [hidden]="true" [(ngModel)]="refresh">

Upvotes: 1

Related Questions