web-dev-qa-db-ja.com

Angular 2フィールドマスキング

たとえば、フィールドをマスクしたい：電話番号が10桁（123-123-1234）の場合（xxx-xxx-1234）のようにマスクする必要があります。また、ページを送信するときに、元の変数（123-123-1234）をサービスに送信する必要があります。

どんな助けでも大歓迎です。

ありがとう。

angularmasking
8
Lucifer

以下のようにパイプを作成できます。

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>

ここのパイプは動的であるため、ユーザーが異なる桁数を入力した場合でも、最後の4桁まではマスクされ、最後の4桁はマスクされません。桁数の異なる例も試してみてください。

これが機能するプランカーです： https://plnkr.co/edit/NKRQpVB1Darw8MxrqucP?p=preview

4
Aakash Thakur

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>

Numberの値は変更されず、表示される値のみが変更されます

3
Faly

あなたはいくつかのコードを投稿することができます、私たちはそれを推測することになっていない。

とにかく、あなたはこのようなオブジェクトを作成することができます

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