[英]How to dynamically change the type of an input field in ionic2/Angular2?
I am trying to implement a password field with a reveal option 我正在尝试使用reveal选项实现密码字段
<ion-item>
<ion-label color="dark" fixed>Mot De Passe</ion-label>
<ion-input type="password"></ion-input>
<ion-icon
[name]="isActive?'eye':'eye-off'"
item-right
(click)="isActive=!isActive;"
isActive=true>
</ion-icon>
</ion-item>
So, I can change the icon but I can't figure out how to toggle the type of the password field !! 所以,我可以更改图标,但我无法弄清楚如何切换密码字段的类型!
You have a few options 你有几个选择
Interpolation 插值
<ion-input type="{{ isActive ? 'password' : 'text' }}"></ion-input>
or 要么
Property Binding 财产约束
<ion-input [type]="isActive ? 'password' : 'text'"></ion-input>
You can use Property binding to pass a string such as 'text' or 'password' value to the type
attribute of the input element: 您可以使用Property绑定将诸如'text'或'password'值的字符串传递给input元素的
type
属性:
export class SomePage {
type: string = "text";
isActive: Boolean = false;
constructor() {}
getType() {
return isActive ? 'password' : 'text';
}
setType() {
this.type = isActive ? 'password' : 'text';
}
}
<ion-item>
<ion-label color="dark" fixed>Mot De Passe</ion-label>
<ion-input [type]="type"></ion-input>
<ion-input [type]="getType()"></ion-input>
<ion-icon
[name]="isActive ? 'eye' : 'eye-off'"
item-right
(click)="isActive = !isActive;"
isActive=true>
</ion-icon>
</ion-item>
You can change the value to however you would need either through the ternary statements you are using isActive ? 'password':'text'
您可以通过使用
isActive ? 'password':'text'
的三元语句将值更改为您需要的值isActive ? 'password':'text'
isActive ? 'password':'text'
or perhaps a method that sets the string value to move the logic out of the template and into the controller. isActive ? 'password':'text'
或者是设置字符串值以将逻辑移出模板并进入控制器的方法。
Here is a plunker demonstrating the functionality showing both setting equal to a class string property and ternary statement. 这是一个演示功能的plunker ,显示设置等于类字符串属性和三元语句。
HTML File : HTML文件:
<input type="{{isPassword ? 'password' : 'text' }}">
<button type="button" (click)="show()">show password</button>
TS File : TS档案:
isPassword = true;
show() {
this.isPassword = !(this.isPassword);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.