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

我想分开的数字组与连字号在角8号，如下图所示

1111-2222-3333-4444

我使用

mat input

还想在用户开始键入数字时设置连字符的格式，我想显示 角度

{{mynumber}}

指令中的格式化数字

我该怎么做

---

谢谢

您可以使用角度材质和角度2文本遮罩进行遮罩

datemask=[/\d/，/\d/，'-'，/\d/，/\d/，'-'，/\d/，/\d/，/\d/，/\d/]；

检查此Stackblitz的工作演示：

---

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

因此，添加连字符的函数类似于：

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掩码。

---

谷歌“ngx输入掩码”是否也适用于mat输入？这是一个外部库解决方案。它要求他安装ngx面具或类似的东西。但这仍然是一个很好的解决方案。