angular - 如何在 Angular 5 响应式(Reactive)表单输入中使用管道

Question

我正在尝试弄清楚如何在响应式(Reactive)表单中使用管道，以便将输入强制转换为货币格式。我已经为此创建了自己的管道，我已经在代码的其他区域进行了测试，所以我知道它可以作为一个简单的管道使用。我的管道名称是“udpCurrency”

关于堆栈溢出，我能找到的最接近的答案是:Using Pipes within ngModel on INPUT Elements in Angular2-View然而，这在我的情况下不起作用，我怀疑这与我的表单是 react 性的事实有关

这里是所有相关代码:

模板

<form [formGroup]="myForm" #f="ngForm">
  <input class="form-control col-md-6" 
    formControlName="amount" 
    [ngModel]="f.value.amount | udpCurrency" 
    (ngModelChange)="f.value.amount=$event" 
    placeholder="Amount">
</form>

组件

import { Component, OnInit, HostListener } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(
    private builder: FormBuilder
  ) {
    this.myForm = builder.group({
      amount: ['', Validators.required]
    });
  }    
}

错误:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: '. Current value: 'undefined: undefined'

Answer 1

这就是混合使用模板驱动表单和响应式表单时可能发生的情况。你有两个相互争斗的绑定(bind)。选择模板驱动或 react 形式。如果你想走 react 路线，你可以为你的管道使用 [value]...

请注意，此管道仅用于在 View 中显示所需的输出。

<form [formGroup]="myForm">
  <input 
    [value]="myForm.get('amount').value | udpCurrency"
    formControlName="amount" 
    placeholder="Amount">
</form>