Angular 2 字段掩码

Question

我想要屏蔽一个字段，例如：拥有10位数字的电话号码[phone]），我需要以这样的方式进行屏蔽（xxx-xxx-1234）。同时，在提交页面时，我需要向服务发送原始变量（123-123-1234）。

任何帮助将不胜感激。

谢谢。

- Lucifer

Answer 1

使用Angular的管道是一个很好的例子：

创建一个管道：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>

数字的值不会改变，只有显示的值会改变。

- Faly

---

抱歉，我认为这对于静态变量可能是可行的。那么动态变量呢？考虑用户在文本框中输入电话号码需要进行掩码处理。 - Lucifer

Answer 2

您可以按照以下方式创建一个管道：

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

- Aakash Thakur

Answer 3

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

无论如何，你可以创建一个像这样的对象。

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

- user4676340