角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種活性形式，蒙面控制

回答

相關問題