2016-09-26 6 views
0

Я пытаюсь построить трубу в Angular2. «YearPipe» должен разрешать только цифры и ограничивать длину ввода до 4. Я вижу очень странное поведение.Angular2 Pipe не может удалить буквы на входе

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

Труба:

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

я решил, что моя труба не может удалить значения, только добавить значения. Таким образом, попытка ограничить число символов до 4 или удалить разряды без ошибок. Если я привяжу другую переменную к тому же полю «customer.year», он отобразит значение в канале.

пример:

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

Если я напечатал 2009asdf, {{}} customer.year покажет 2008 в то время как вход покажет 2008asdf. Пример здесь: https://plnkr.co/edit/JAxA777p1dX8u2RpmvSA?p=preview, похоже, способен сбрасывать цифры, поэтому я немного запутался. Он реализован так же, как и моя трубка, поэтому я подозреваю, что проблема с версией. В настоящее время я использую RC5 с CLI.

+0

так что вы хотите? иметь четкое представление о нем. – micronyks

+0

обновленный questi на – AFrieze

+0

Вы сделали что-нибудь для достижения этого? – micronyks

ответ

4

Кажется, мы нужно попробовать немного магии :)

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

Я думаю, он должен работать в RC.5, а