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