Angular 2 - 输入掩码：输入框显示格式化值，而模型保留未格式化的值

Question

我尝试在输入字段格式/掩码值时键入，而实际模型保留原始（或不同格式）值。我正在考虑电话号码等，但为了简单起见，我使用大写字母进行测试。

我试过一堆东西，希望它像指令一样简单。但似乎无法使显示值偏离表单值。

普拉克：http://plnkr.co/edit/VH5zn4S8q28CBpFutBlx?p=preview

这里的指令：

@Directive({ 
    selector: '[uppercase]', 
    host: { 
    '(input)': 'onInputChange()', 
    } 
}) 

export class UppercaseDirective { 

    constructor(private model: NgFormControl) { } 

    onInputChange() { 
    let newValue = this.model.value.toUpperCase(); 
    this.model.viewToModelUpdate(newValue); 
    this.model.valueAccessor.writeValue(newValue); 
    } 

} 

和形式：

<form [ngFormModel]='myForm'> 
    <input [ngFormControl]='myForm.controls.field' uppercase> 
    <div> 
    {{ myForm.value.field }} 
    </div> 
</form> 

Answer 1

尝试直接更新控制参考这样的：

onInputChange() { 
    let newValue = this.model.value.toUpperCase(); 
    this.model.control.updateValue(newValue); 
} 

参见plunker http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview

Answer 2

说实话，我仍然在学习angular2和高科技仍然是真正的不成熟说这是做到这一点的最好方式，但在玩过之后：

import {Directive, ElementRef, Output, EventEmitter} from '@angular/core'; 
import {NgFormControl} from '@angular/common'; 

@Directive({ 
    selector: '[uppercase]', 
    host: { 
    '(input)': 'onInputChange()', 
    } 
}) 

export class UppercaseDirective { 

    @Output() onChange = new EventEmitter(); 
    rawValue: string = ''; 

    constructor(private model: NgFormControl, private elementRef: ElementRef) { } 

    onInputChange() { 
    let str = this.model.value; 
    this.rawValue = this.rawValue.substring(0, str.length) + str.substring(this.rawValue.length, str.length); 
    let newValue = this.rawValue.toUpperCase(); 
    this.model.viewToModelUpdate(newValue); 
    this.model.valueAccessor.writeValue(newValue); 
    this.onChange.emit(this.rawValue); 
    } 

} 

那么你可以这样说：

<input [ngFormControl]='myForm.controls.field' uppercase (onChange)="raw = $event"> 
<div> 
    {{ raw }} 
</div> 

因为每当你更新模型，变量会发生变化。你必须做的是分开的。尝试在你的plnkr，它的工作。

编辑： 可能需要为不同的场景有些工作虽然哈哈