如何在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)
  }
}