如何在角度6的输入字段中键入时自动为手机号码输入字段添加“-”

Question

我有一个输入类型的文本，我想基本上使其成为移动电话号码，并在输入文本框时自动添加“-”，例如999-999-9999，我已经尝试过了，但是没有用。这是下面的代码

app.component.html

{
  "request": {
    "method": "POST",
    "url": "/test",
    "headers" : {
      "Content-Type" : {
          "equalTo" : "text/xml"
      }
    },
    "bodyPatterns" : [ {
      "matchesXPath" : "/stuff:a[./stuff:b='1'][./stuff:c='2']",
      "xPathNamespaces" : {
        "stuff" : "http://www.example.com/namespaces/ad"
      }
    } ]
   },
  "response": {
    "body": "Hello world!",

    "status": 200
  }

}

app.component.ts

<input (keydown)=onKeydownEvent($event) type="text" maxlength="9" placeholder="mobile number"/>

Answer 1

如果格式始终相同，则始终可以对其进行切片。

var phoneFormatted = phone.slice(0, 3) + "-" + phone.slice(3, 6) + "-" + phone.slice(6);

js bin示例：https://jsbin.com/zibodosava/edit?html,js,console,output

Answer 2

我认为最简单的解决方案是添加ngx-mask

那你就可以做

<input type='text' mask='(000) 000-0000' >