我正在使用 Angular 指令在表单中切换显示和隐藏密码字段。
我已经能够实现切换密码值的总体目标,但是,我似乎无法切换按钮中呈现的文本以反映输入字段的状态。
一旦用户单击按钮以显示输入的密码,如何将按钮的文本切换为 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>
查看结果演示:密码切换演示