javascript - 密码不显示
问题描述
我正在使用 angular 并且我是新手。我需要在单击按钮时在文本和密码之间切换。我关注了这篇文章,但仍然看不到密码。有人可以帮忙吗。以下是我的html代码
<input type="tel" #x [(ngModel)]="loginuser.password" formControlName="password" name="password" id="password" placeholder="Enter your password" class="conceal-circle">
<label for="password">Enter your password</label>
</div>
<span class="btn-eye">
<a href="javascript:void(0);" (click)="x.type=x.type=='password'?'text':'password'" class="text-dark text-decoration-none">
<i class="fa fa-eye float-right"></i>
</a>
</span>
以下是我的打字稿代码
export class LoginComponent implements OnInit {
formGroup: FormGroup;
currentUser: User;
constructor(private router: Router, private formbuilder: FormBuilder,
private authService: AuthService, private token: TokenStorage, private loginService: LoginserviceService) { }
loginuser: LoginUser = new LoginUser();//contains user name and pwd
ngOnInit() {
this.currentUser = JSON.parse(window.sessionStorage.getItem('currentUser'));
if (typeof this.currentUser !== 'undefined') {
window.sessionStorage.removeItem('currentUser');
}
if (null !== this.token.getToken()) {
this.token.signOut();
}
this.formGroup = this.formbuilder.group({
userName: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
});
}
login(){
//some api calls here
}
}
cancel(): void {
this.loginuser.userId = '';
this.loginuser.password = '';
}
}
解决方案
尝试这个
.HTML
</div>
<input type="{{ isActive ? 'password' : 'text' }}"
[(ngModel)]="loginuser.password" formControlName="password" name="password" id="password" placeholder="Enter your password" class="conceal-circle">
<label for="password">Enter your password</label>
</div>
<span class="btn-eye">
<a href="javascript:void(0);" (click)="eye()" class="text-dark text-decoration-none">
<i class="fa fa-eye float-right"></i>
</a>
</span>
.ts
isActive: boolean = true;
eye(){
this.isActive = !this.isActive;
}
希望能帮到你。
推荐阅读
- qt - 我如何知道 Qt 是否与 openssl 链接,以及哪一个?
- r - 在 R data.table 中初始化和复制列表列
- python - Pandas 中 dataframe.loc() 的 Numpy 等价性是什么
- vimeo - 如何在不使用 iframe 的情况下暂停 Vimeo 视频
- postgresql - 在postgresql中加入一个表两次
- django - Django 块代码不呈现
- hadoop - 如何在 hive-site.xml 中映射 hive 仓库路径?
- python - 是否有在 matplotlib 上绘制水平射线的功能?
- php - 如何在 php 中添加指向由 while 循环创建的图像的链接?
- datagrid - dojo 增强的网格服务器端分页不起作用