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，它的工作。

編輯： 可能需要爲不同的場景有些工作雖然哈哈