1

Hi I am working in Angular and in one of the field which is phone number ,I want to mask the string on HTML view only except the last 3 characters. How can I do that ?

Example: - 1212121212 as XXXXXXX212 or *******212

Note: - Only in view I need to show masked. The field is editable and I am patching pre defined value. Once I input new value then mask must not show

<input matInput placeholder='{{"PhoneNumber" | translate}}' formControlName="mobilenumber"
            class="form-control" numbersOnly maxlength="10" minlength="10" required autocomplete="off"
            pattern="[6789][0-9]{9}" title="Please enter valid phone number" inputmode="numeric">
Optimist Rohit
  • 428
  • 6
  • 24

2 Answers2

2

To use in a FormControl you need know when is focus and when not then you can use some like

 [ngModel]="condition?(yourFormControl.value|yourpipe):
            yourFormControl.value"
 (ngModelChange)="! condition && yourFormControl.setValue($event)"

Imagine you has a variable "caracteres" and a FormGroup

  caracteres:number=3;
  form=new FormGroup({
    name:new FormControl()
    mobilenumber:new FormControl(),
    
  })

You can to have some like

<form [formGroup]="form">
     <input matInput 
            (focus)="caracteres=0" 
            (blur)="caracteres=3"  
            [ngModel]="caracteres?(form.get('mobilenumber').value|hideChars):
                       form.get('mobilenumber').value" 
            (ngModelChange)="!caracteres && form.get('mobilenumber').setValue($event)"
            [ngModelOptions]="{standalone:true}"
            class="form-control">

     <!--see that the rest of your input are in the way-->
     <input formControlName="name"/>
</form>
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • I am using reactive form. Not using ngModel – Optimist Rohit May 09 '22 at 15:48
  • I know, a FormControl exist if you has an input or not if you mannage with an input or with a custom form Control. See that I use [ngModel] **inside** a formGroup that use the value of the formControl and change the value of the formControl (this is the reason to use setValue) see the [stackblitz](https://stackblitz.com/edit/angular-ivy-7qgchy?file=src%2Fapp%2Fapp.component.html) Perhafs you see more clear – Eliseo May 09 '22 at 15:52
  • Facing errors - `Can't bind to 'ngModelOptions' since it isn't a known property of 'input'. [ngModelOptions]="{standalone:true}">` – Optimist Rohit May 09 '22 at 16:00
  • has you import `FormsModule`? – Eliseo May 09 '22 at 16:04
  • Yes I have ..both reactive and form module – Optimist Rohit May 09 '22 at 16:06
  • Worked , was getting error as I was using formControlName as well. My bad. Thanks – Optimist Rohit May 09 '22 at 16:19
1

You could use a pipe, to achieve this

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

@Pipe({
   name: 'hideChars',
})
export class HideCharsPipe implements PipeTransform {
   transform(value: string, minChars = 3): string {
     
      const numHideChar = value.length - minChars;

      const result = [...value].map((char, index) => (index >= numHideChar ? char : '*'));

      return result.join('');
   }
}

And in your view, use like this

{{ mobilenumber | hideChars }}
Matheus R. Mokwa
  • 61
  • 3