加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何在Angular 5反应形式输入中使用管道

发布时间:2020-12-17 08:53:39 所属栏目:安全 来源:网络整理
导读:我试图弄清楚如何在反应形式中使用管道,以便输入被强制为货币格式.我已经为此创建了自己的管道,我已经在代码的其他区域进行了测试,所以我知道它可以作为一个简单的管道工作.我的管道名称是’udpCurrency’ 我在堆栈溢出时能找到的最接近的答案是这一个:Usin
我试图弄清楚如何在反应形式中使用管道,以便输入被强制为货币格式.我已经为此创建了自己的管道,我已经在代码的其他区域进行了测试,所以我知道它可以作为一个简单的管道工作.我的管道名称是’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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读