[英]How to toggle the text with a button that hides and shows password value in Angular
我正在使用 Angular 指令在表單中切換顯示和隱藏密碼字段。
我已經能夠實現切換密碼值的總體目標,但是,我似乎無法切換按鈕中呈現的文本以反映輸入字段的 state。
一旦用戶單擊按鈕以顯示輸入的密碼,如何將按鈕的文本切換為 HIDE,然后在用戶單擊按鈕以隱藏密碼后將其切換回 SHOW?
這是代碼庫:
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[passToggle]'
})
export class ToggleDirective {
visible: boolean = false;
constructor(private el: ElementRef, private renderer: Renderer2) { }
div = this.renderer.createElement('div');
span = this.renderer.createElement('span');
ngOnInit() {
this.buildInputAppend();
}
buildInputAppend () {
this.renderer.addClass(this.div, 'input-group-append');
this.renderer.addClass(this.span, 'input-group-text');
const text = this.renderer.createText('Show');
this.renderer.appendChild(this.span, text);
this.renderer.appendChild(this.div, this.span);
this.renderer.appendChild(this.el.nativeElement, this.div);
}
@HostListener('click') onClick() {
this.visible = !this.visible;
const parent = this.el.nativeElement.parentNode;
const input = this.el.nativeElement.firstChild;
if (!this.visible) {
input.setAttribute('type', 'text');
} else {
input.setAttribute('type', 'password');
}
}
}
HTML 模板:
<div class="form-group">
<div class="input-group" passToggle>
<input class="form-control" type="password"formControlName="password" >
</div>
</div>
查看結果演示: 密碼切換演示
在onClick()
方法的末尾添加這段代碼
this.span.innerText = this.toggleName('Show', 'Hide');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.