Angolare 2 - Maschera di input: la casella di input visualizza il valore formattato, mentre il modello mantiene il valore non formattato

Question

Sto provando ad avere un formato di campo di input/valori maschera man mano che vengono digitati, mentre il modello attuale mantiene il raw (o formattato in modo diverso) valore. Sto pensando ai numeri di telefono ecc., Ma per semplicità sto usando le lettere maiuscole per i test.

Ho provato un sacco di cose, sperando che sia semplice come una direttiva. Ma non sembra che il valore visualizzato diventi distante dal valore del modulo.

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

Ecco la direttiva:

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

} 

e la forma:

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

Answer 1

tenta di aggiornare riferimento di controllo direttamente in questo modo:

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

Vedi anche plunker http://plnkr.co/edit/XYPWYgA8lbg2EdxPqzWj?p=preview

Answer 2

Per essere onesti, io sto ancora imparando angular2 e la tecnologia è ancora molto immaturo per dire che questo è il modo migliore per farlo, ma dopo aver giocato con esso:

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

} 

allora si può ottenere in questo modo:

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

Dal momento che ogni volta che si aggiorna il modello, la variabile cambierà. Devi fare è separato. Provato nel tuo plnkr e ha funzionato.

EDIT: potrebbe essere necessario un po 'di lavoro per diversi scenari però haha ​​