我如何获得ngx-mask的掩码值？

Question

我正在尝试借助ngx-mask模块为电话号码创建简单的字段，如下所示：

<mat-form-field>
              <input matInput formControlName="PhoneNumber" placeholder="Phone number" mask="(000) 0000-00" prefix="+1" [showMaskTyped]="true">
</mat-form-field>

可以，但是控件PhoneNumber中的值为999999999。如何保存带有掩码的控件值，即特殊符号和前缀？基本上我需要保存用户看到的值：[phone]

Answer 1

我建议您使用ElementRef。您必须在ElementRef文件中定义输入的ts：

@ViewChild('customInput', {static: false}) inputEl: ElementRef;

然后在html中定义它，因此您的模板代码将更改为此

<mat-form-field>
          <input #customInput matInput formControlName="PhoneNumber" placeholder="Phone number" mask="(000) 0000-00" prefix="+1" [showMaskTyped]="true">
</mat-form-field>

现在，您可以在#customInput文件中访问ts的实际掩码值：

showMeInput(): void {
    console.log(this.inputEl.nativeElement.value);
}