Angular FormControl 值实际包含什么？为什么它与 nativeElement 值不同？

Question

更新：记录 blur 和 keyup 事件显示遮罩从未进入 FormControl 值。这是为什么？即使调用控件本身的 setValue() 方法也会去掉掩码。喜欢：

<mat-form-field>
  <mat-label>MSRP Pricing</mat-label>
  <input
    type="text"
    #cost
    matInput
    mask="separator.2"
    thousandSeparator=","
    prefix="$ "
    [formControl]="msrpCtrl"
    (blur)="setVal(msrpCtrl, cost.value)"
    (keyup)="log('keyup', msrpCtrl.value)">
  <mat-error *ngIf="msrpCtrl.hasError('required')">
    MSRP Price is required
  </mat-error>
</mat-form-field>

setVal(control: FormControl, val){
    console.log('set val as' + val);
    control.setValue(val);
  }

这仍然去除了面具。这里有什么想法吗？

原文Post：

我正在使用 Angular 8.0.0、Angular 表单 8.0.0、Angular Material 8.2.3 和 ngx-mask 8.1.5

我一直在构建动态表单并使用掩码来帮助引导用户输入正确的数据。

无论出于何种原因，FormControl 值都会去掉掩码。示例案例 - 厂商建议零售价成本。

所以我有一个简单的输入如下：

<mat-form-field>
  <mat-label>MSRP Pricing</mat-label>
  <input
    type="text"
    #cost
    matInput
    mask="separator.2"
    thousandSeparator=","
    prefix="$ "
    [formControl]="msrpCtrl">
  <mat-error *ngIf="msrpCtrl.hasError('required')">
    MSRP Price is required
  </mat-error>
</mat-form-field>

当用户输入时，它会为每个千位分隔符添加一个逗号，只让他们指定 2 个小数点，并在第一个数字前保留一个美元符号和一个 space。足够简单，而且有效。

当需要将数据实际发送到别处时，问题就出现了。如果用户在该字段中输入数字并且掩码显示的是

130,000.56 美元

formControl实际持有的值是130000.56

我希望它实际保存输入值 130,000.56 美元

我能想出如何做到这一点的唯一方法是直接在我的 TS 文件中引用 DOM 输入元素，并以这种方式获取值：

@ViewChild('cost', {static: false}) cost: ElementRef;
.
.
.
console.log(this.cost.nativeElement.value);
// Or send the value on

这绝对不理想，尤其是对 40 多个输入执行此操作。首先从 FormControl 值中剥离掩码是否有原因？如果没有，是否有更好的方法来捕获掩码显示的值？

Answer 1

我遇到了同样的问题，想在 phone 数字掩码中保留破折号。使用 Angular 8.2.12 和 ngx-mask 8.2.0 我通过将 dropSpecialCharacters 选项设置为 false

解决了这个问题

<input type="text" formControlName="phone" mask="000-000-0000" [dropSpecialCharacters]="false" />

link 至 documentation

Angular FormControl 值实际包含什么？为什么它与 nativeElement 值不同？

What does Angular FormControl value actually hold and why is it different from the nativeElement value?

angular

angular-forms

ngx-mask