Angular - 如何以百分比形式制作输入字段格式，但在编辑时删除百分比？

Question

我试图找到一种方法，在初始页面加载时以百分比(例如 97,52%)显示 html 输入字段(通过 Angular 服务获取到后端的数据，即可观察/订阅)，但也有这个输入字段松散它是我编辑时的百分比格式(即，当引发 DOM(焦点)事件时)。

format 的数据绑定(bind)到一个模型。让我们将模型字段称为 myModel.percentNumber，其中对于 '100 %' 为 percentNumber=1(对于 '69 %' 为 .69，或者对于 '10 000 %' 为 100)

因此，当我单击指示“97,52 %”的字段时，我希望它变为“97.52”，但模型中的数据绑定(bind)值应为 0.9752，因为这是我需要存储的。

该字段应该使用 ngModel 进行绑定(bind)。

备注 :这应该适用于国际化，所以我不能使用基于删除空格、替换 '.' 的“肮脏”解决方案。经过 '，' ...
在这里你可以看到我举了一个例子，其中格式化的百分比值应该有一个逗号作为小数分隔符和一个空格作为千​​位分隔符，但这取决于用户的本地化。

到目前为止，我已经尝试了一些东西，但没有一个解决了所有问题。

1) 使用 2 路绑定(bind) 作为起点，即
<input [(ngmodel)]="myModel.percentNumber | percent:'1.2-2'">
...但它确实会导致管道出现问题:

Uncaught Error: Template parse errors:

2)从2路绑定(bind)短语法我想要长语法 ， IE。
<input [ngmodel]="myModel.percentNumber | percent:'1.2-2'" (ngModelChange)="myModel.percentNumber = $event">
这允许在初始加载时具有正确的百分比格式(在后端响应时，如果 myModel.percentNumber=0.9752 它正确显示为“97,52 %”)，但是，当您单击输入进行编辑时它，当我希望它显示“97.52”时格式保持不变
我认为解决这个问题的正确“Angular ”方法不是添加一个(焦点)事件处理程序，我将在其中执行与 PercentPipe.transform() 相反的操作，例如类似于 PercentPipe.parse() (它不存在)。这将需要为您应该具有此行为的每个字段添加一个(焦点)事件处理程序。可重用性会很低。我相信 angular Directive 方法应该更可取。

3) 带有 Angular Directive(指令) :我创建了一个指令 PercentFormatterDirective带选择器 percentFormatter和一个输入 percentDigits接受与 PercentPipe 相同格式的字符串类型(即 digitInfo)。一个使用示例是:
<input percentFormatter percentDigits="1.2-2" [ngModel]="myModel.percentNumber" (ngModelChange)="myModel.percentNumber = $event">
我宁愿不必在 [ngModel] 中仍然使用“正常”的 PercentPipe，因为它需要编写 digitInfo 1.2-2两次(即我不想写 <input percentFormatter percentDigits="1.2-2" [ngModel]="myModel.percentNumber | percent:'1.2-2'" (ngModelChange)="myModel.percentNumber = $event">
我可以在单击输入(焦点)时格式化该值，因为我已经在我的 PercentFormatterDirective 中作为(焦点)事件的监听器实现了:

  @HostListener("focus", ["$event.target.value"])
  onfocus(value) {
    if (value) {
      // we have to do the oposite than the transform (e.g. we want to go from % to number)
      this.htmlInputElement.value = this.parse(value);
    }
  }

因此，当我在该字段中单击时，这会从 '97,52 %' 到 '97.52' 得到满足。
在这里，我没有详细介绍我创建的 parse() 方法(您只需要知道它是有效的，并且基于我用来获取用户本地化的 PercentPipe & 这个 find 是小数点分隔符和千位分隔符)。

我还可以在离开输入字段时将值格式化回百分比格式，因为我在 PercentFormatterDirective 中作为 (blur) 事件的监听器实现了:

  @HostListener("blur", ["$event.target.value"])
  onblur(value) {
    if ((value as string).indexOf('%') === -1) {
      this.formatNumberInPercent('100for100percent');
    }
  }

因此，当我离开该领域时，这会从“97.52”变为“97,52 %”。
在这里，我没有详细介绍 formatNumberInPercent() 方法(您只需要知道它是有效的并且基于 PercentPipe.transform() 方法，但是之前将值除以 100，因为 PercentPipe.transform() 将得到你从 '0.9752' 到 '97,52 %' 但在我的输入中我有 '97.52' 这显然是用户要输入的)

本期是在初始加载时(更确切地说，当从后端返回时，通过 observable/subscribe，当设置 myModel.percentNumber 时)，PercentFormatterDirective 中的 (focus) 或 (blur) @HostListener 都不会被调用，因为有没有用户与 DOM 交互。
如果我在 PercentFormatterDirective 中添加一个 ngOnInit()，那么是的，我可以格式化绑定(bind)值(即使用我创建的名为 formatNumberInPercent('100for100percent') 的自定义方法将“0.9752”转换为“97,52%”，该方法再次使用 PercentPipe.transform( ) 方法，但没有将值除以 100)...但是，如果我直接在组件中绑定(bind)数据，则此方法有效，ei不使用可观察/订阅。
当使用 observable/subscribe(我必须使用)从后端获取答案时， ngOnInit() PercentFormatterDirective 的已执行。

当获得响应(来自 observable/subscribe)时，我需要能够执行格式化。我试过添加 ngOnChanges(changes: SimpleChanges)在 PercentFormatterDirective 中(然后使用 for (let propName in changes) 读取 SimpleChange 数组)，但是我没有看到来自 myModel.percentNumber 的新绑定(bind)值。好像 ngOnChanges(changes: SimpleChanges)只提供一个 SimpleChange 数组，其属性对应于我的指令的输入(即百分比数字)。

我有 private elementRef: ElementRef注入(inject)指令的构造函数，但正如我在 ngOnChanges() 中所说的我无法获得 myModel.percentNumber 的值( this.elementRef.nativeElement.value 给了我 ""并且从来没有任何值)。

也许我在生命周期中还为时过早？

或者也许应该采取另一种方法？

如果您有任何建议，我会很高兴听到提出来! :)

Answer 1

啊!与#2 如此接近。
您可以在模板中完成这一切。
您可以使用 [value] 设置值作为输入 - 然后使用 (input) - 或可能 (change) 将值转换回。我认为你不能在 ngModel 中使用管道:

<input type="number" [value]="myModel.percentNumber * 100" (input)="myModel.percentNumber = $event.target.value / 100">

没有文本转换或 dom 操作这种方式