Angular2 Pipe kann Buchstaben in Eingabe nicht entfernen

Question

Ich versuche, eine Pipe in Angular2 zu erstellen. Das "YearPipe" sollte nur Ziffern erlauben und die Eingabedauer auf 4 begrenzen. Ich sehe ein sehr merkwürdiges Verhalten.

<input type="text" [ngModel]="customer.year | year" (ngModelChange)="customer.year = $event"> 

Das Rohr:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'year' }) 
export class YearPipe implements PipeTransform { 
    transform(val: string): string { 
    if (val){ 
    let outputValue = val; 
    outputValue = outputValue.replace(/\D/g, ""); 
    outputValue = outputValue.substring(0, outputValue.length < 4 ? outputValue.length : 4); 
    console.log(outputValue); 
    return outputValue 
} 
return ""; 
} 
} 

ich festgestellt habe, dass meine Pfeife nicht Werte entfernen, nur Werte hinzufügen. So scheitert der Versuch, die Anzahl der Zeichen auf 4 zu begrenzen oder Nicht-Ziffern zu entfernen. Wenn ich eine andere Variable in dasselbe "customer.year" -Feld einbindet, wird der pipe-Wert angezeigt.

Beispiel:

<input type="text" [ngModel]="customer.year | year" (ngModelChange)="customer.year = $event"> 
{{ customer.year }} 

Wenn ich 2009asdf getippt, {{customer.year}} würde 2008 zeigen, während die Eingangs 2008asdf zeigen würde. Das Beispiel hier: https://plnkr.co/edit/JAxA777p1dX8u2RpmvSA?p=preview scheint in der Lage zu sein, Ziffern zu entkleiden, also bin ich etwas verwirrt. Es ist das gleiche wie meine Pipe, also vermute ich ein Versions-Problem. Ich verwende RC5 mit der CLI.

Answer 1

Scheint wir müssen einige Magie, um zu versuchen :)

import { Pipe, PipeTransform, WrappedValue } from '@angular/core'; 

@Pipe({ name: 'year'}) 
export class YearPipe implements PipeTransform { 
    transform(val: string): any { 
    if(!val) return ''; 
    return WrappedValue.wrap(val.replace(/\D/g, '') 
     .substring(0, val.length < 4 ? val.length : 4)) 
    } 
} 

Plunker Example

ich denke, es sollte auch