Reputation: 161
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?
Upvotes: 9
Views: 21296
Reputation: 6568
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>
Upvotes: 0
Reputation: 524
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>
Upvotes: 1
Reputation: 387
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!
Upvotes: 1
Reputation: 991
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';
}
Upvotes: 4
Reputation: 38693
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
Upvotes: 19