Angular 2 Field Masking

Question

我想掩盖一个字段，例如：电话号码是10位数（123-123-1234）我需要以（xxx-xxx-1234）这样的方式进行掩码。同时提交页面，我需要发送原始变量（123-123-1234）到服务。

任何帮助将不胜感激。

谢谢。

Answer 1

您可以发布一些代码，我们不应该猜测它。

不管怎么说，你可以创建这样

let phoneBundle = { 
    realPhone: '123-123-1234', 
    displayPhone: 'xxx-xxx-' + this.phoneBundle.realPhone.substr(-1, 4) 
}; 

Answer 2

对象这是使用角度的管一个很好的例子：

创建一条管道：mask.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'mask' }) 
export class MaskPipe implements PipeTransform { 
    transform(phrase: string) {  
     let toBeReplaced = phrase.slice(0, 7); 
     return phrase.replace(toBeReplaced, "xxx-xxx"); 
    } 
} 

将管道放入模块的声明中：

import { MaskPipe } from "./mask.pipe"; 
@NgModule({ 
    declarations: [ MaskPipe ] 
    // ... 
}) 

在模板中使用管道：

//组件的类：

export class AppComponent { 
    number: string = "123-123-1234"; 
} 

//组件模板：

<h1> {{ number | mask }}</h1> 

数的值并没有改变，只是显示的值更改

Answer 3

您可以像下面一样为其创建管道：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'mask' 
}) 
export class NumberMaskPipe implements PipeTransform { 
    transform(number: string): string { 
    const visibleDigits = 4; 
    let maskedSection = number.slice(0, -visibleDigits); 
    let visibleSection = number.slice(-visibleDigits); 
    return maskedSection.replace(/./g, '*') + visibleSection; 
    } 
} 

而在你的组件，你可以这样做：

export class PhoneNumberComponent implements OnInit { 
    phoneNumber: string; 

    constructor() {} 

    ngOnInit() { 
    this.phoneNumber = "2131232131238867"; 
    } 
} 

最后在组件：这里

<p>Your phone number is: {{ phoneNumber | mask }}</p> 

管是动态的，所以即使用户进入不同数量的数字只会掩盖，直到但而不是最后四位数字。请尝试使用不同位数的示例。

这里有一个工作plunker：https://plnkr.co/edit/NKRQpVB1Darw8MxrqucP?p=preview