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?

Intracellular

I think this is a real issue. See this - github.com/angular/angular/issues/… – Intracellular

is user-input a custom directive? can you show it's relevant code? – Bonnibelle

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> – Gendron

Alternative solution is write a function to set the value and call it like [type]="functionName()" – Galoot

Answer 1

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

Myriapod

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

Answer 2

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

Starbuck

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

@Starbuck 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. – Intracellular

Answer 3

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!

Singles

Answer 4

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>

Pharynx

Answer 5

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>

Milldam