angular - 如何在输入字段中使用 PercentPipe

Question

我正在尝试为百分比创建输入字段。我正在使用 PercentPipe 来显示百分比。但是当我输入一些数字时出现错误

<input required type="number" min="0" max="100"
   [ngModel]="viewModel.value | percent:'1.2'" id="limitPercentage"
   (ngModelChange)="viewModel.value=$event"
   [formControl]="viewModel.control"
   name="limitPercentage" class="form-control"
   (showErrorMessage)="showErrorMessage($event)"
/>

控制台错误:

 ERROR Error: InvalidPipeArgument: '0% is not a number' for pipe 'PercentPipe'

Answer 1

我发现使用百分比管道对输入没有好处。

我将增值税(税率)税率作为 float 存储在我的数据库中，但我想在产品编辑表单中将其显示为百分比。我怀疑否则会造成混淆。

所以 percentpipe 不是很合适，因为它将数字转换为文本字符串。现在我想我可以在保存时将数字转换回来，但我想在输入中使用数字微调器并处理验证。

这就是我最终得到的......

1) 在表单中我有一个输入

    <mat-form-field class="col-12 col-sm-6 col-md-2" >
      <mat-label>VAT rate </mat-label>
      <input type="number" matInput formControlName="prodVatRate" 
             min="0" max="100" pattern ="^0?[0-9]?[0-9]$|^(100)$">
          <span matPrefix>%&nbsp;</span>
        </mat-form-field>

2) 在组件中我有几个简单的函数来处理转换。

toPercent(floatingNumber: number): number  {
   return floatingNumber * 100;
}

toDecimal(integerNumber: number): number {
    return integerNumber / 100;
}

它们非常简单，您可能希望将它们内联添加。

3) 我使用的是响应式表单，因此在页面加载时我使用 http 响应“patchValue”表单...

this.productForm.patchValue({
  prodVatRate: this.toPercent(this.product.prodVatRate),
  ... more data inserted here
});

4) 最后在我的表单保存/提交中，我将数据转换回 float 。

    const p = { ...this.product, ...this.productForm.value };

    // change the Vat rate back to a floating point number
    p.prodVatRate = this.toDecimal(p.prodVatRate);

希望对你有所帮助。