角2种活性形式，蒙面控制

我正在在角2反应形式，它允许用户输入一个电话号码角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

来源

2016-11-11 tt9

[在Angular2形式的输入掩码字段（的可能的复制http://stackoverflow.com/questions/37800841/input-mask- fields-in-angular2-forms） – silentsod

@silentsod他问起反应形式。另一个例子是使用ngModel – Nix

我分享一下如何使用掩模

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（“电话”）选择ID电话

的addEventListener允许瞬间实时转换成手机格式

如果你需要改变555-5555-55，您可以更改部分.match（/\ d {0,2}），以数字来想

问候

来源

2016-11-15 17:41:08

角2种活性形式，蒙面控制

回答

相关问题