指令后的 ngModel 设置值

Question

我有以下问题：

我有一个 phone 数字输入字段，如下所示：

我想屏蔽 55-5555-5555 这样的文本，所以我创建了一个指令：

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appPhoneNumber]'
})
export class PhoneNumberDirective {

 constructor(public ngControl: NgControl) { }

  ngOnInit() {
    this.windowReady(this.ngControl.model);

  }

  windowReady(value) {
    this.onInputChange(value, false);
  }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(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 <= 2) {
      newVal = newVal.replace(/^(\d{0,3})/, '');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})/, '-');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})(\d{0,4})/, '--');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})(\d{0,4})/, '--');
    }
    console.log("New value is: " + newVal);
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

这里是输入字段：

<mat-form-field style="width: 75%;">
  <input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono">
</mat-form-field>

如您所见，输入有一个用于获取和设置值的 ngModel，我现在面临的问题是当输入首次出现并且 ngModel 有一个值时，该字段显示如下文本：

5555555555

而不是：

55-5555-5555

我现在的理论是指令正在设置值：

this.ngControl.valueAccessor.writeValue(newVal);

在输入本身之前：

<input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono">

因此当输入设置值时，它采用不带掩码的值并覆盖指令设置的文本。

有谁知道如何在 ngModel 之后调用指令或对我有帮助的东西？

Answer 1

我相信您需要管道，而不是指令。如果你看一下这个 post 它讨论了如何使用带有 ngModel

的管道

Answer 2

ng-mask 可能就是您要找的。

<input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono" mask='55-5555-5555'>

这里是link以获取更多信息ng-mask

Answer 3

问题不在于 [(ngModel)] 或 Input 控件。此问题的实际原因是 matInput 指令。只需删除 matInput 并检查。

指令后的 ngModel 设置值

ngModel setting value after directive

angular

typescript

ngmodel