Question

我试图在Angular2中构建一个管道。＆＃34; yearPipe＆＃34;应该只允许数字并将输入长度限制为4.我看到一些非常奇怪的行为。

<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或删除非数字失败。如果我将另一个变量数据绑定到同一个＆＃34; customer.year＆＃34;字段，它显示管道值。

示例：

<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似乎能够删除数字，所以我有点困惑。它的实现与我的管道相同，所以我怀疑版本问题。我目前正在使用带有CLI的RC5。

Answer 1

似乎我们需要尝试一些魔法：）

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中起作用

Angular2管道无法删除输入

1 个答案: