Angular 13：反应式表单控件输入屏蔽

Question

我正在尝试将电话号码输入字段设置为反应形式，并设置格式指令以这种格式 [phone] 格式化电话号码。

示例链接： https://stackblitz.com/edit/angular13-reactive-form-validation-y1qwmf?file=src/app/app.component.ts

它在提交时给我电话号码输入值，如下所示

{“手机”：“（112）345-66899”}

但是，我想将值显示为 (112) 345-66899，当我提交时，我需要控件的值而不需要格式化

{ “phno”：“11234566899” }

无论如何我可以使用反应式表单控件为显示和原始值设置两个不同的值。

任何帮助将不胜感激。

Answer 1

这是 ngx-mask 文档中的示例：npmjs.com/package/ngx-mask

<input type="text" [mask]="'[phone]'" />