如何在 Angular 2 formcontrolname 上应用管道

【问题标题】：How to apply pipe on angular 2 formcontrolname如何在 Angular 2 formcontrolname 上应用管道
【发布时间】：2018-07-19 18:13:22
【问题描述】：

我在我的 formcontrolname 上应用数字管道。 formcontrolname 对 html 中的某些操作具有价值。当表单加载时，它有空值。下面是我的代码，我在加载屏幕时看到下面的错误。

当 tempValue 为 123 时，我需要显示 123.00 如果值为 777.45，我需要显示 777.45

<input  type="number" formControlName="{{tempValue | number:'3.2'}}"  id="tempValue" name="tempValue" >

错误错误：InvalidPipeArgument: '[object HTMLInputElement]' for pipe 'DecimalPipe'

【问题讨论】：

【解决方案1】：

formControlName 用于将输入字段映射到您的FormGroup 的定义，它不用于定义输入字段的格式。

据我所知，格式化输入字段是目前 Angular 开箱即用不支持的。但是，您可以创建一个指令来根据需要对其进行格式化，就像他们在this article 中所做的那样。我还发现 someone else 试图这样做。

对我来说还有一个更重要的问题，您确定要格式化输入字段中的值吗？一般来说，用户往往会觉得这很烦人。如果您只是简单地将值格式化在页面上的其他位置，那么您的问题将不再是问题：

<input type="number" formControlName="tempValue" id="tempValue" name="tempValue">
Value entered: {{yourForm.value.tempValue | number:'3.2'}}

【讨论】：