如何使用角度5进行遮罩

Question

是否可以在Angular 5中创建一个如下所示的掩码：

XXX-XX-1234

当用户点击文本框时，它应该更改为以下文本：

1234121234

非常感谢！

Answer 1

是的，面具可以解决问题。您也可以使用管道，这样您实际上不会更改值，只需屏蔽它即可。这是我为你准备的一个简单例子：

https://stackblitz.com/edit/angular-pvmlij?file=src%2Fapp%2Fapp.componenthtml

Answer 2

您可以添加一个正则表达式来更改它。

value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,2})(\d{0,4})/);

它将返回4个数组，您可以根据需要连接它们，例如

!x[2] ? x[1] : `${x[1]}-${x[2]}${x[3] ? '-' + x[3] : ''}`;