如何解决如何将掩码应用于打字稿中的默认值
我有一个 mask-phone 指令,当用户写一个值时,它在输入中完美地工作,但我需要设置一个默认值,我不知道如何在组件方法中应用 mask 指令。该值显示在没有掩码的输入中,只有当我修改该值时,掩码才会出现。
我遇到的问题是,在德国,电话号码有多种可能性,因此我无法在默认值中设置特定掩码,例如: (49)(170)-1111111 (49)(1514)-1111111 (49)(25679)-1111111
我写了一个例子,你可以在下面的链接中看到: https://stackblitz.com/edit/angular5-phone-mask-directive-roeqfk?file=app/app.component.ts
提前致谢:)
解决方法
您可以从指令内部提供默认值并在 OnInit
生命周期钩子中设置掩码。这还有一个好处,即每次使用此指令时默认值都相同。
代码:
import {Directive,ElementRef,HostListener,OnInit} from '@angular/core';
import {NgControl} from '@angular/forms';
@Directive({
selector: '[formControlName][appPhoneMask]'
})
export class PhoneMaskDirective implements OnInit{
defaultValue: string = '4912345678'
constructor(public ngControl: NgControl,private elementRef: ElementRef) { }
ngOnInit(): void {
this.applyMask(this.defaultValue)
}
@HostListener('ngModelChange',['$event'])
onModelChange(event): void {
this.onInputChange(event,false);
}
@HostListener('keydown.backspace',['$event'])
keydownBackspace(event): void {
this.onInputChange(event.target.value,true);
}
onInputChange(event,backspace): void {
let newVal = event.replace(/\D/g,'');
if (backspace && newVal.length <= 6) {
newVal = newVal.substring(0,newVal.length - 1);
}
this.applyMask(newVal)
}
applyMask (value): void {
if (value.length === 0) {
value = '';
} else if (value.length <= 3) {
value = value.replace(/^(\d{0,2})/,'($1)');
} else if (value.length <= 6) {
value = value.replace(/^(\d{0,2})(\d{0,3})/,'($1) ($2)');
} else if (value.length <= 12) {
value = value.replace(/^(\d{0,3})(\d{0,7})/,'($1) ($2)-$3');
} else if (value.length <= 13) {
value = value.replace(/^(\d{0,4})(\d{0,'($1) ($2)-$3');
} else if (value.length <= 14) {
value = value.replace(/^(\d{0,5})(\d{0,'($1) ($2)-$3');
} else {
value = value.substring(0,14);
value = value.replace(/^(\d{0,'($1) ($2)-$3');
}
this.ngControl.valueAccessor.writeValue(value);
}
/** This method allows to keep the formControl value without the mask,in order to use it in backend queries */
@HostListener('input') onChange(): void {
const newVal = this.elementRef.nativeElement.value.replace(/\D/g,'');
this.ngControl.control.setValue(newVal,{
emitEvent: false,emitModelToViewChange: false,emitViewToModelChange: false
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。