Kątowa 2 - Maska wejściowa: Pole wejściowe wyświetla sformatowaną wartość, a model zachowuje niesformatowaną wartość

Question

Próbuję mieć wartości formatu/maski pola wejściowego podczas ich wpisywania, a rzeczywisty model zachowuje surowe (lub inaczej sformatowane)) wartość. Myślę numery telefonów itp., Ale dla uproszczenia używam wielkich liter do testowania.

Próbowałem wielu rzeczy, mając nadzieję, że jest to tak proste, jak dyrektywa. Ale nie można uzyskać wartości wyświetlania odejść od wartości formularza.

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

Oto dyrektywy:

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

} 

i forma:

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

Answer 1

próby aktualizacji odniesienia sterowania bezpośrednio tak:

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

Zobacz także plunker http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview

Answer 2

Szczerze mówiąc, jestem w trakcie nauki angular2 i tech jest jeszcze bardzo niedojrzały do powiedzmy, że jest to najlepszy sposób na zrobienie tego, ale po zabawie z nim:

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

} 

następnie można dostać to tak:

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

Od kiedy tylko zaktualizować modelu, zmienna ulegnie zmianie. Musisz zrobić to osobno. Próbowałem go w twoim pnkr i działało.

EDIT: może wymagać trochę pracy dla różnych scenariuszy, chociaż haha ​​