angular - 如何获得 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. 您必须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>

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

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