javascript - Angular 2-根据模式更改文本显示格式

Question

我想更改手机号码文本字段输入的显示格式。 前任。

对于号码 1212121212，它应该在文本内显示 (121) 212-1212，并且仅供查看。我还想要将其插入数据库的全文。 我如何在 Angular 2 文本输入中实现此目的？

<p>How it is now</p>
<input type="text" value="1212121212" name="mobile"><br>
<p>How it should look</p>
<input type="text" value="(121) 212-1212" name="mobile2">

Answer 1

你可以做something like this 使用管道(只需在输入末尾添加一个数字)。

我当然使用一个非常简单的正则表达式，但您可以创建您想要的正则表达式。

transform(value: string, args?: any): any {
  const regex: RegExp = new RegExp(/(\d{3})(\d{3})(\d{4})/);
  const match = value.match(regex);
  if(match) {
    return `(${match[1]})${match[2]}-${match[3]}`;
  } else {
    return value;
  }
}