角度8：管道过滤器无法在响应式表单值更新上工作？

Question

为什么角管在更新表单后不过滤反应形式的值？

这里我有这个filterfunction来转换值，我使用了自定义管道并将过滤器添加到其中。但是为了举个例子，我已经在ts文件中编写了该函数。

将一些新值更新为表单后，自定义管道（过滤器函数）不会转换值，我们该怎么做？

fg: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.fg = this.fb.group({
    name1: 1.3,
    name2: 33.34,
    name3: 3.5
  });
}

reload() {
  this.fg.patchValue({
    name1: 10.9999999,
    name2: 20.22222,
    name3: 30
  });
}

filtervalue(value) {
  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2
  });
  return formatter.format(value);
}

html

<form [formGroup]="fg">
  <input formControlName="name1" [value]="filtervalue(fg.get('name1').value)">
  <input formControlName="name2" [value]="filtervalue(fg.get('name2').value)">
  <input formControlName="name3" [value]="filtervalue(fg.get('name3').value)">
</form>
<input type="button" value="reload" (click)="reload()">
{{fg?.value |json}}

这是第一次输出：

$ 1.30

$ 33.34

$ 3.50

但是当我修补新的值以形成表单时，它不显示转换后的值，它仅显示修补的值

10.999999

20.22222

30

我想在更新后像货币管道一样转换值。

Answer 1

Pipes默认为pure，这意味着它们不会更新（或将缓存结果）视图，除非您对要转换的value的引用没有更改。您可以通过在pure: false中添加@Pipe来更改此行为。