时间戳

首页 > 解决方案 > Angular 8：管道过滤器不适用于反应式表单值更新？

html - Angular 8：管道过滤器不适用于反应式表单值更新？

问题描述

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

在这里我有这个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

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

主要问题是当我们更新表单时货币管道不起作用。那么我该如何解决这个问题呢？

标签： htmlangularangular-reactive-formsangular-pipe

解决方案

推荐阅读