如何仅在字符串显示中屏蔽除最后 3 个字符以外的所有字符

Question

您好，我在 Angular 工作，在 phone 数字字段之一，我想在 HTML 视图中屏蔽字符串 除了最后 3 个字符。我该怎么做？

示例：- 1212121212 作为 XXXXXXX212 或 *******212

注意: - 只有在视图中我需要显示屏蔽。该字段是可编辑的，我正在修补预定义值。一旦我输入新值，掩码就不能显示

<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">

Answer 1

你可以使用管道来实现这个

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('');
   }
}

在你看来，这样使用

{{ mobilenumber | hideChars }}

Answer 2

要在 FormControl 中使用，您需要知道什么时候是焦点，什么时候不是，然后您可以使用类似的东西

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

假设您有一个变量“caracteres”和一个 FormGroup

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

你可以点个赞

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

如何仅在字符串显示中屏蔽除最后 3 个字符以外的所有字符

How to mask all characters except last 3 characters on a string display only

angular

mask

mat-input