Angular 2 反应形式，蒙面控件

Question

我正在 Angular 2 中制作一个响应式表单，它允许用户输入电话号码

        <div class="col-md-4 top-space-small">
            <div class="input-label" style="margin-bottom:0">Home phone:</div>
            <input type="text" 
                   formControlName="homePhone"
                   class="pf-input form-control"  />
        </div>

有没有办法以电话格式屏蔽用户输入，以便他们输入数字，但显示的输入值看起来像 (xxx) xxx-xxxx

Answer 1

我分享如何使用面具解决这个细节

1.- 在您的视图中，您必须将文本框放置在显示的标识符中

<input type="text" id="phone" placeholder="(55)-5555-5555">

2.- 在您的组件中，添加 AfterViewInit 以便在主视图完成加载后，开始加载辅助视图，该辅助视图将具有执行电话格式功能的脚本，如下所示。

import { Component, AfterViewInit } from '@angular/core';
@Component({
selector:'my-app',
template: '<input type="text" id="phone" placeholder="(55)-5555-5555"})
export class AppComponent implements AfterViewInit
{
   ngAfterViewInit()
   {
     document.getElementById('phone').addEventListener('input',    function (e) 
     {
      var x = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,4})(\d{0,4})/);
      e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
     });
   }
}

好的，解释代码：

NgAfterView 加载脚本。使用 document.getElementById('phone') 选择 id phone

AddEventListener 允许将时刻实时转换为手机格式

如果您需要更改 555-5555-55，您可以将 .match(/\d{0,2}) 部分更改为想要的数字

问候