我试图弄清楚如何在反应形式中使用管道,以便输入被强制为货币格式.我已经为此创建了自己的管道,我已经在代码的其他区域进行了测试,所以我知道它可以作为一个简单的管道工作.我的管道名称是’udpCurrency’
我在堆栈溢出时能找到的最接近的答案是这一个:Using Pipes within ngModel on INPUT Elements in Angular2-View然而,这不适用于我的情况,我怀疑它与我的表格是被动的事实有关
以下是所有相关代码:
模板
<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'
这是混合模板驱动形式和反应形式时可能发生的情况.你有两个绑定相互斗争.选择模板驱动或反应形式.如果你想进入反应路线,你可以使用[值]作为你的管道……
<form [formGroup]="myForm"> <input [value]="myForm.get('amount').value | udpCurrency" formControlName="amount" placeholder="Amount"> </form>