如何在角 8 中添加数字的连字符中间

Question

我想要单独的数字组，用角8符号的连字符，如下所示。

1111-2222-3333-4444

我也使用mat-input当用户开始输入数字并且我想显示时格式化设置连字符 角度{{mynumber}}指令中的格式化数字。

我该怎么做？

谢谢

Answer 1

您可以使用角度材质和角度2文本蒙版遮罩

datemask = [/d/, /d/, '-', /d/, /d/, '-', /d/, /d/, /d/, /d/];

<mat-form-field class="example-full-width">
<input matInput [textMask]="{mask: datemask}" [(ngModel)]="myModel" placeholder="Type" value="01/03/2019">
</mat-form-field>

查看此堆栈闪电战的工作演示： https://stackblitz.com/edit/angular-material-input-mask-ycbdzl

Answer 2

好吧，我找到的解决方案有点丑陋。 基本上，您必须注册到输入的输入事件并更改其值，使其包含连字符。在获取表单值时，您还必须去掉连字符。

因此，添加连字符的函数如下所示：

export class InputPrefixSuffixExample {
designedValue: string = "";
design(inputValue: string) {
if (inputValue.length > 6) {
this.designedValue = inputValue.substr(0, 7) + "-" + inputValue.substr(8, 12);
} else if (inputValue.length > 2) {
this.designedValue = inputValue.substr(0, 3) + "-" + inputValue.substr(4, 6);
}
}
}

或者，您可以使用库来帮助您。最受欢迎的库是ngx-mask。 https://www.npmjs.com/package/ngx-mask