标签: ngx-mask

我正在尝试在 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

我想在表单上添加反应式表单控件，并触发错误：

多个自定义值访问器与具有未指定名称属性的表单控件相匹配

一切都是单独工作的，反应式表单验证，掩码或 matDatepicker，任何组合也可以工作，但三者一起提示错误。

这是我的代码：

在组件.ts中

formGroup = new FormGroup({
    date: new FormControl()
  });

在组件.html中

    <mat-form-field>
      <input type="text" matInput [matDatepicker]="date_picker" mask="d0/M0/0000" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="date_picker"></mat-datepicker-toggle>
      <mat-datepicker #date_picker></mat-datepicker>
    </mat-form-field>

我在用着：

"@angular/cli": "8.3.19"
"ngx-mask": "8.1.7"
"@angular/material": "8.2.3"

我需要阻止负值的类型，并且不允许99,999,999.99输入比我输入更多的数字。

这是我用于货币输入的代码。

<input mask="separator.2" thousandSeparator="," placeholder="Currency">

任何帮助将不胜感激。

这里也是 Stackblitz 的例子。

https://stackblitz.com/edit/ngx-mask-currency-input?file=src/app/app.component.html

更新

我找到了问题第二部分的答案。现在输入看起来像这样

<input mask="separator.2" thousandSeparator="," separatorLimit="10000000"  placeholder="Currency">

现在只需要屏蔽-字符的类型

我正在使用这个库ngx-mask，并且尝试使用响应式表单屏蔽 Angular 11 中的一些字段（日期和电话号码）。这是我的代码中的两个片段

<input type="text" class="form-control" mask="d0/M0/0000" [leadZeroDateTime]="true" [showMaskTyped]="true" required formControlName="dateOfBirth" />
<input type="text" class="form-control" id="mobile-phone" mask="0000-0000" [showMaskTyped]="true" required formControlName="mobilePhone" />

但是当我尝试从表单中获取值时，这些值没有格式化：

let formValue = this.createForm.value;

这就是它在 UI 中的显示方式

但这是我访问值时的结果

知道我做错了什么