如何仅在字符串显示中屏蔽除最后 3 个字符以外的所有字符
How to mask all characters except last 3 characters on a string display only
您好,我在 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">
你可以使用管道来实现这个
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 }}
要在 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>
您好,我在 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">
你可以使用管道来实现这个
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 }}
要在 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>