замаскировать и снять маску значение поля ввода нажатием кнопки угловой 4 - PullRequest
Новая
       9

замаскировать и снять маску значение поля ввода нажатием кнопки угловой 4

0 голосов
/ 30 августа 2018

Я пытаюсь создать маску поля, например, вводит 111, а при наборе автоматически становится 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;
    }
  }
}

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете изменить тип ввода, вам не нужно заменять значение ввода.

Как это

ФАЙЛ ТС 

  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>

Надеюсь, это поможет вам узнать значение маски.

...