Question

我正在尝试使用在此问题的可接受答案上找到的说明在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>

mask指令

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

除了对初始值进行掩码之外，其他所有方法都可以正常工作。如何获取该值以掩盖初始输入？

Answer 1

您可以从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。

屏蔽指令，不屏蔽初始值

1 个答案: