我正在尝试使用在此问题的接受答案中找到的说明在Angular7中实现一些输入掩码:Mask For an Input
当我输入新值时,代码可以正常工作。但是,当我使用值初始化表单时,输入仍然是未屏蔽的。我已经分解了原始问题的StackBlitz以显示问题:https://stackblitz.com/edit/angular6-phone-mask-i6aklq
我项目的相关代码如下:
分配值
updateForm(): void {
this.renewalForm = this.fb.group({
customFields: this.fb.array(this.license.customFields.map(x => this.fb.control(x.value))),
contacts: this.fb.array(this.license.contacts.map(x => this.fb.group({
contactType: new FormControl(x.type),
contactFirstName: new FormControl(x.firstName),
contactLastName: new FormControl(x.lastName),
contactPhone: new FormControl(x.phone), // <---- FormControl being masked
contactId: new FormControl(x.id)
})))
});
/* I tried assigning the values through setValue, but this didn't work either...
for (let i = 0; i < this.license.contacts.length; i++) {
((this.renewalForm.get("contacts") as FormArray).at(i).get("contactPhone") as FormControl).setValue(this.license.contacts[i].phone);
}
*/
}
输入HTML
<form [formGroup]="renewalForm" (ngSubmit)="validateForm();">
<fieldset [disabled]="validated">
<!-- ... -->
<mat-form-field>
<inputplaceholder="Phone Number" formControlName="contactPhone" mask-phone/>
</mat-form-field>
<!-- ... -->
</fieldset >
</form>
掩码指令
import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[formControlName][mask-phone]',
})
export class MaskPhoneDirective {
constructor(public ngControl: NgControl) { }
@HostListener('ngModelChange', ['$event'])
onModelChange(event) {
this.onInputChange(event, false);
}
@HostListener('keydown.backspace', ['$event'])
onKeydownBackspace(event) {
this.onInputChange(event.target.value, true);
}
onInputChange(event, backspace) {
let newVal = event.replace(/\D/g, '');
if (backspace && newVal.length <= 6) {
newVal = newVal.substring(0, newVal.length - 1);
}
if (newVal.length === 0) {
newVal = '';
} else if (newVal.length <= 3) {
newVal = newVal.replace(/^(\d{0,3})/, '($1)');
} else if (newVal.length <= 6) {
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) $2');
} else if (newVal.length <= 10) {
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');
} else {
newVal = newVal.substring(0, 10);
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');
}
this.ngControl.valueAccessor.writeValue(newVal);
}
}
一切正常,除了掩盖初始值。如何获取掩盖初始输入的值?
您可以从onInputChange
中提取格式代码,将该代码放在formatValue
方法中,并在ngOnInit
中调用该方法来格式化初始值:
ngOnInit() {
this.formatValue(this.ngControl.value, false);
}
onInputChange(event, backspace) {
this.formatValue(event, backspace);
}
formatValue(event, backspace) {
let newVal = event.replace(/\D/g, '');
if (backspace && newVal.length <= 6) {
newVal = newVal.substring(0, newVal.length - 1);
}
if (newVal.length === 0) {
newVal = '';
} else if (newVal.length <= 3) {
newVal = newVal.replace(/^(\d{0,3})/, '($1)');
} else if (newVal.length <= 6) {
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) ($2)');
} else if (newVal.length <= 10) {
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) ($2)-$3');
} else {
newVal = newVal.substring(0, 10);
newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) ($2)-$3');
}
this.ngControl.valueAccessor.writeValue(newVal);
}
有关演示,请参阅this stackblitz。