Angular 2 - Eingabemaske: Eingabefeld Anzeige formatiert Wert, während Modell unformatierten Wert

Question

Ich versuche, ein Eingabefeld Format/Maske Werte wie sie eingegeben werden, während das tatsächliche Modell behalten die Raw (oder anders formatiert) Wert. Ich denke Telefonnummern usw., aber aus Gründen der Einfachheit verwende Großbuchstaben zum Testen.

Ich habe eine Menge Zeug ausprobiert, in der Hoffnung, es ist so einfach wie eine Richtlinie. Es scheint aber nicht so zu sein, dass der Anzeigewert vom Formwert abweicht.

zupfen: http://plnkr.co/edit/VH5zn4S8q28CBpFutBlx?p=preview

Hier ist die Richtlinie:

@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); 
    } 

} 

und die Form:

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

Answer 1

versuchen, die Kontrolle Referenz wie diese direkt zu aktualisieren:

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

See Plunker auch http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview

Answer 2

Um ehrlich zu sein, ich lerne immer noch angular2 und die Tech ist immer noch sehr unreif Sagen Sie, dies ist der beste Weg, es zu tun, aber nachdem Sie damit herumgespielt haben:

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); 
    } 

} 

dann können Sie es wie folgt erhalten:

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

Seit wann immer Sie das Modell aktualisieren, wird die Variable ändern. Sie müssen sich trennen. Versucht es in Ihrem PLNKR und es hat funktioniert.

EDIT: könnten einige Arbeit für verschiedene Szenarien müssen allerdings haha ​​