如何在输入字段中使用 PercentPipe

我正在尝试创建百分比输入字段。我正在使用 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'

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

我将增值税（税率）率作为浮点数存储在我的数据库中，但我想在产品编辑表单上将其显示为百分比。我怀疑否则的话会很混乱。

因此，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）最后在我的表单保存/提交中，我将数据转换回浮点数。

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

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

我希望它能帮助你。