通过单击角度4按钮屏蔽和取消屏蔽输入字段值

Question

我正在尝试创建一个字段掩码，如使用输入111，而自动键入它变成xxx。通过眼睛按钮，我显示的值如xxx或111.当眼睛图标打开时，当他输入1时，它将仅显示为1。当眼睛图标在输入1时关闭时，它将显示为x。我面临的问题是，当眼睛图标关闭时他正在打字时，所有值都记录为xx。因此，当他点击眼睛图标使其打开时，我没有原始值。有没有办法我只能更新视图值并保持表单控件值为原始值。请找到以下代码。

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appSsnMask]'
})
export class SsnMaskDirective {

  visible = false;
  toggleElem;
  toggleElemATag;
 toggleElemITag;
  parentElem;
  inputElem;
  private value: any;
  private element: HTMLInputElement;

  constructor(
    private elem: ElementRef,
    private renderer: Renderer2,
    public formControl: NgControl
  ) {
    this.element = elem.nativeElement;
  }

  ngOnInit() {
    this.inputElem = this.elem.nativeElement;
    this.parentElem = this.inputElem.parentElement;

    // create toggle button
    this.toggleElem = this.renderer.createElement('span');
    this.toggleElemATag = this.renderer.createElement('a');
    this.toggleElemITag = this.renderer.createElement('i');

    this.renderer.addClass(this.toggleElemITag, 'fa');
    this.renderer.addClass(this.toggleElemITag, 'fa-eye');

    // append toggle element to input element holder
    this.renderer.appendChild(this.toggleElem, this.toggleElemATag);
    this.renderer.appendChild(this.toggleElemATag, this.toggleElemITag);
    this.renderer.appendChild(this.parentElem, this.toggleElem);

    // listen to event on toggle button
    this.renderer.listen(this.toggleElemATag, 'mousedown', this.toggleMask.bind(this));
    this.value = this.element.value;
    this.maskValue(true);
  }

  toggleMask(e) {
    e.preventDefault();
    this.visible = !this.visible;
    if (this.visible) {
      this.showSlashIcon();
    } else {
      this.showEyeIcon();
    }
    this.maskValue(!this.visible);
  }

  eyeStatus(status) {
    if (status) {
      this.showEyeIcon();
    } else {
      this.showEyeIcon();
    }
  }

  showSlashIcon() {
    this.renderer.removeClass(this.toggleElemITag, 'fa-eye');
    this.renderer.addClass(this.toggleElemITag, 'fa-eye-slash');
  }

  showEyeIcon() {
    this.renderer.removeClass(this.toggleElemITag, 'fa-eye-slash');
    this.renderer.addClass(this.toggleElemITag, 'fa-eye');
  }

  @HostListener('input')
  onChange() {
    this.value = this.element.value;
    this.maskValue(!this.visible);
  }

  @HostListener('focus')
  focusListener() {
    this.renderer.appendChild(this.parentElem, this.toggleElem);
  }

  @HostListener('blur')
  blurListener() {
    if (this.formControl.control.invalid && this.formControl.control.errors
      && this.formControl.control.dirty && this.formControl.control.touched) {
      this.renderer.removeChild(this.parentElem, this.toggleElem);
    } else {
      this.renderer.appendChild(this.parentElem, this.toggleElem);
    }
  }

  maskValue(status) {
    if (status) {
      this.element.value = this.element.value.replace(/[0-9]/g, 'x');
    } else {
      this.element.value = this.value;
    }
  }
}

Answer 1

您可以更改输入类型，不需要替换输入值。

像这样

TS文件

  public inp_value= "";
  public tmp_value= "";
  public showPass = false;


maskValue() {
this.showPass = !this.showPass;
if(this.showPass){
  this.inp_value = this.tmp_value;
} else {
  this.tmp_value = this.inp_value;
  this.inp_value = "";
 for (var i = 0; i < this.tmp_value.lenght; i++)
   this.tmp_value+="x";
    }
}
}

html文件

<ion-item>
<ion-input type="text" placeholder="{{lang.Labels.Password}}" name="password" [(ngModel)]="inp_value" ></ion-input>
<button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="maskValue()" style="font-size: 16px;"> <ion-icon name="ios-eye-off-outline"></ion-icon></button>

我希望这能帮助你了解掩盖价值。