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

时间:2018-03-22 09:59:53

标签: javascript jquery html angular

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

对于编号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">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

您可以使用管道执行 https://codesandbox.io/s/pmopkvwkq7 (只需在输入的末尾添加一个数字)。

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

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;
  }
}