angular - 基于 Angular 5 的掩码电话输入字段

Question

我引用了链接:Input mask fields in Angular2 forms，我能够屏蔽输入字段，例如:(123) 456-7890。

请在下面找到更新的代码:

指令 TS 文件:

@Directive({
  selector: '[appPhoneMasking]',
  host: {
    '(ngModelChange)': 'onInputChange($event)',
    '(keydown.backspace)': 'onInputChange($event.target.value, true)'
  }
})
export class PhoneMaskingDirective {

  constructor(public model: NgControl) {}

  onInputChange(event, backspace) {
    // remove all mask characters (keep only numeric)
    var newVal = event.replace(/\D/g, '');

    if (backspace) {
      newVal = newVal.substring(0, newVal.length - 1);
    }

    // don't show braces for empty value
    if (newVal.length == 0) {
      newVal = '';
    }

    // don't show braces for empty groups at the end
    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 {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(.*)/, '($1) $2-$3');
    }

    if(newVal.length > 14) {
       newVal = newVal.slice(0, 14); 
    }
    // set the new value
    this.model.valueAccessor.writeValue(newVal);       
  }
}

和 HTML 文件:

<form [formGroup]="addUser" (ngSubmit)="submitUser()">
     <input type="text" class="form-control" formControlName="user_phone"  appPhoneMasking>
</form>

组件文件:

this.addUser= this._formBuilder.group({
   user_phone: new FormControl('', [Validators.maxLength(14)]),
});

我有两个问题想解决，但没有成功。它们是:

1. 当我按下退格键时，字符串中的两个字符被删除。
2. 我还希望电话号码中只有 14 个字符。只要我输入 15 个字符，输入字段就会更新。但是表格没有更新。我收到错误消息，提示我的表单无效。

请告诉我如何解决这些问题。

Answer 1

When I press backspace two character are deleted from the string.

您不需要 if 退格键，退格键事件正在运行，之后您将再删除一个字符。