Angular 2 Masquage de champ

Question

Je souhaite masquer un champ par exemple: ayant un numéro de téléphone de 10 chiffres (123-123-1234) J'ai besoin de masquer de telle sorte que (xxx-xxx-1234). Aussi bien que soumettre la page je dois envoyer la variable originale (123-123-1234) au service.

Toute aide serait grandement appréciée.

Merci.

Answer 1

Vous pouvez poster du code, nous ne sommes pas supposés le deviner.

Quoi qu'il en soit, vous pouvez créer un objet comme celui-ci

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

Answer 2

Il est un bon exemple d'utiliser la pipe angulaire:

Créer un tuyau: 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"); 
    } 
} 

Mettez le tuyau dans les déclarations de votre module:

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

Utilisez le tuyau dans votre modèle:

// classe de composants:

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

// le modèle de composant:

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

La valeur du nombre ne change pas, seule la valeur affichée changement

Answer 3

Vous pouvez créer un tuyau pour celui-ci comme ci-dessous:

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; 
    } 
} 

Et dans votre appareil que vous pouvez faire:

export class PhoneNumberComponent implements OnInit { 
    phoneNumber: string; 

    constructor() {} 

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

Enfin dans le composant:

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

pipe ici est dynamique même si l'utilisateur entre un nombre différent de chiffres, il ne masquent jusqu'à, mais pas les quatre derniers chiffres. Essayez l'exemple avec un nombre de chiffres différent.

Voici un plunker de travail: https://plnkr.co/edit/NKRQpVB1Darw8MxrqucP?p=preview