如何在angular2中動態地格式化輸入元素？

Question

我正在使用angular2，新窗體api。

我想要一個電話號碼輸入框，它隨用戶鍵入自動格式化。

例如，用戶類型：

12345678901 

，並在他們進入它改變

1 (234) 567-8901 

我想通了如何將指令添加到輸入控制，但我不可識別電話號碼不知道如何將自己注入輸入處理流水線。

Answer 1

你必須創建自己的指令，以此作爲一個例子，它把使用Phone.format，存儲模型的原始號碼，但顯示格式的數字用戶：

import { Directive } from '@angular/core' 
import { NgControl } from '@angular/forms' 
import { Phone } from '../phone' 

@Directive({ 
    selector: '[ngModel][phone]', 
    host: { 
    '(ngModelChange)': 'onInputChange($event)', 
    '(blur)': 'onBlur($event)' 
    } 
}) 
export class PhoneDirective { 

    constructor (control: NgControl) { 
    this.control = control 
    } 

    ngOnInit() { 
    let formatted = Phone.format(this.control.model) 
    setTimeout(() => this.control.valueAccessor.writeValue(formatted), 0) 
    } 

    onBlur() { 
    let val = this.control.model 
    let raw = val.replace(/\W/g, '') 
    let formatted = Phone.format(raw) 

    this.control.valueAccessor.writeValue(formatted) 
    this.control.viewToModelUpdate(raw) 
    } 

    onInputChange (val) { 
    let raw = val.replace(/\W/g, '') 
    if (val !== raw) this.control.viewToModelUpdate(raw) 
    } 
}