我正在try 弄清楚如何在react 式表单中使用管道,以便将输入强制转换为货币格式.我已经为此创建了自己的管道,并在代码的其他部分进行了测试,因此我知道它可以作为一个简单的管道工作.我的管道名称是‘udpCurrency’

关于堆栈溢出,我能找到的最接近的答案是这个:Using Pipes within ngModel on INPUT Elements in Angular2-View.然而,这在我的情况下不起作用,我怀疑这与我的窗体是被动的有关.

以下是所有相关代码:

The Template

<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>

The component

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]
    });
  }    
}

The error:

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

推荐答案

这就是当您混合模板驱动形式和react 形式时可能发生的情况.你有两个Bundle 在一起互相争斗. Select 模板驱动或react 形式.如果你想走react 路由,你可以用[value]作为你的管道.

注意,此管道仅用于在视图中显示所需的输出.

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

Angular相关问答推荐

Angular 16:CSRF配置:我仍然可以使用HttpXsrfInterceptor和HttpXsrfCookieExtractor类吗?Inteli-J说他们不存在

无效的ICU消息.缺少';}';|Angular material 拖放(&A)

AOS-如何在向上滚动时不再次隐藏元素

Angular 17多内容投影错误

当可观察到的更改时,异步管道不更新视图

如何在 Angular 中每 x 秒从 REST api 加载数据并更新 UI 而不会闪烁?

无法使用@ngrx/component-store 在其他组件中获取状态更改值

MatTooltip 显示在 html 原生对话框下方

react表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4

Angular 5 国际化

如何在angular material中使用输入类型文件

取消订阅服务中的http observable

Angular2:如果 img src 无效,则显示占位符图像

Angular 2 - 组件内的 formControlName

Angular - 是否有 HostListener-Events 列表?

如何在 Angular 2 的同一个组件中使用多个 ng-content?

模拟子组件 - Angular 2

Angular material和更改字体

默认和特定请求超时

如何在 Angular 8 应用程序中支持 Internet Explorer?