如何获取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。如何使用掩码保存控制值，即特殊符号和前缀？基本上我需要保存用户看到的值：+1(999) 9999-99

Answer 1

使用dropSpecialCharacters="false“

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

Answer 2

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

@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>

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

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