输入中的Angular4遮罩字符不改变其值

  • Z时代
  • 2024-01-10
  • 分类：问答

如何在不改变实际值的情况下屏蔽除Angular 4中的最后四个输入以外的输入中的所有字符（即show *）？输入中的Angular4遮罩字符不改变其值

例如：号码应该像这样*** 1234的输入文本框内部和值应为7671234.

回答：

如果你想使用该指令在TemplateDriveForm使用指令

@Directive({ 
    selector: '[stringHide]' 
}) 
export class StringDirective implements OnInit { 
    private value: any; //the variable where we save the "true value" 
    private element: HTMLInputElement 
    constructor(private el: ElementRef, private form: ControlContainer) { 
    this.element = el.nativeElement; 
    } 
    ngOnInit() { //It's necesary use OnInit, otherwise the first time not formtted 
    this.value = this.element.value; 
    this.formatValue(); 
    } 
    @HostListener('input') onChange() { //when a change happens save the value in a variable 
    this.value = this.element.value; 
    } 
    @HostListener('blur') onBlur() { //when lost the focus call format function 
    this.formatValue(); 
    } 
    @HostListener('focus') onFocus() { //when get the focus recover the true value 
    this.element.value = this.value; 
    } 
    formatValue() { //here, change the apperance of the input 
        //I choose that if the value.length>14 only show 10 "*" 
    let len=this.element.value.length; 
    this.element.value = (len <= 4) ? this.element.value: 
         (len>14)? "**********"+this.element.value.substr(len - 4): 
           "**************".substring(0,len-4)+this.element.value.substr(len - 4); 
    } 
}

回答：

你必须添加AfterViewChecked事件，因为在ngOnInit我们不能得到的“真正价值”

@Directive({ 
    selector: '[stringHide]' 
}) 
export class StringDirective implements OnInit,AfterViewChecked { //<--AddAfterViewChecked 
private value: any; 
private initialized:boolean; //<--add a new variable 
.... 
//Add ngAfterViewCheckecd 
ngAfterViewChecked() 
{ 
    if (this.element.value && !this.initialized) 
    { 
     this.initialized=true; 
     this.value = this.element.value; 
     this.formatValue(); 
    } 
} 
.....

以上是 输入中的Angular4遮罩字符不改变其值 的全部内容， 来源链接： utcz.com/qa/257701.html

回到顶部