Angular2 - cannot change input type dynamically

Question

I was wondering if anyone can help explain why i am unable to change form input type dynamically?

For e.g.

<user-input type="{{ isActive ? 'password' : 'text' }}"></user-input>

doesn't work.

But this works,

<user-input type="password" *ngIf="isActive"></user-input>
<user-input type="text" *ngIf="!isActive"></user-input>

user-input.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'user-input',
    templateUrl: './user-input.html'
})
export class UserInput {

    @Input()
    public isActive: boolean;

    constructor() {

    }
}

user-input.html

<input 
    type="{{ isActive ? 'password' : 'text' }}" 
    class="form-control"
    [(ngModel)]="value"
/>

user-input-password.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector:
      'input[type=password][formControlName],input[type=password][formControl],input[type=password][ngModel]'
})
export class PasswordValueAccessor {

    public pattern: RegExp;

    private regexMap = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;

    @HostListener('keypress', ['$event']) 
    public onKeyPress (e: any)
    {
        this.pattern = this.regexMap;
        const inputChar = e.key;

        if (this.pattern.test(inputChar)) {
            // success
        } else {
            e.preventDefault();
        }
    }
}

The issue i have is that when i set the type dynamically, the user-input-password directive doesn't get triggered. If i set the type to password directly then it does get trigged.

Is there another way to dynamically change input type?

I think this is a real issue. See this - github.com/angular/angular/issues/… — ymrs
– ymrs, Commented Apr 3, 2018 at 5:40
is user-input a custom directive? can you show it's relevant code? — Pengyy
– Pengyy, Commented Apr 3, 2018 at 5:41
It worked for <input> tag. is user-input a custom directive? Please show us what error did you get when you use <user-input type="{{ isActive ? 'password' : 'text' }}"></user-input> — Swanand Taware
– Swanand Taware, Commented Apr 3, 2018 at 8:53
Alternative solution is write a function to set the value and call it like [type]="functionName()" — Arun
– Arun, Commented Apr 5, 2018 at 3:44

Ramesh Rajendran · Accepted Answer · 2018-04-03 05:24:52Z

19

try this

<user-input [type]="isActive ? 'password' : 'text'"></user-input>

Please take a look at this

Dynamically generate input field type with angular 2 and set the type of the field

answered Apr 3, 2018 at 5:24

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ymrs Over a year ago

<user-input [type]="isActive ? 'password' : 'text'"></user-input> doesn't work either.

Anas · Accepted Answer · 2018-04-03 05:27:10Z

4

You can prefer this way. works most time:

<user-input #input type="password" ></user-input>
<button (click)="changeInput(input)">Change input</button>

ts file

changeInput(input: any): any {
    input.type = input.type === 'password' ? 'text' : 'password';
  }

answered Apr 3, 2018 at 5:27

Anas

99113 silver badges29 bronze badges

2 Comments

Ramesh Rajendran Over a year ago

I hope he want to change the type at default load.

ymrs Over a year ago

@Anas Bin Nazeer, unfortunately i don't have a button on the page to do this. I want to be able to change the type on load.

Akhil · Accepted Answer · 2021-05-05 16:47:29Z

I'm looping through an object with multiple key-value pairs and displaying the "labels" and "values" dynamically (Here, I can't decide which key is going to be "password"). So, instead of type attribute, I used property binding [type] which eventually worked for me.

Here is my code

<div class="form-group row" *ngFor="let item of allItemsObject | keyvalue">
    <label for={{item.key}} class="col-sm-5 col-form-label">{{item.key | uppercase}}</label>
    <div class="col-sm-7">
        <input [type]="item?.key==='password'?'password':'text'" class="form-control" id={{item.key}} value={{item.value}} />
    </div>
</div>

This can help both the queries, one who wants to know how to iterate through an object to print key-values dynamically and next, on how to dynamically update the "type" property value of <input/> tag

Hope this helps. Thanks!

Shafkhan · Accepted Answer · 2023-05-05 05:48:23Z

1

Binding input type directly to the input element did not work, but adding the condition to a parent element worked. Code is as follows:

<div *ngIf="input.type === 'number' ">
    <input type="number">
</div>
<div *ngIf="inpyt.type === 'text' ">
    <input type="text">
</div>

answered May 5, 2023 at 5:48

Shafkhan

5247 silver badges24 bronze badges

Comments

Shafkhan · Accepted Answer · 2024-07-25 14:58:35Z

0

I would suggest to handle this from typescript like

type: string;

functiontochangetype() {
  if (your condtion) {
    this.type = "password";
  } else {
    this.type = "text";
  }
}

and in HTML

<user-input type={{type}}></user-input>

edited Jul 25, 2024 at 14:58

Shafkhan

5247 silver badges24 bronze badges

answered Apr 3, 2018 at 5:30

Hrishikesh Kale

6,6484 gold badges20 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular2 - cannot change input type dynamically

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related