Html <；输入/输出。。。（角度材质形式）允许输入3个小数点，但仅显示2个小数点

我有一个规则的角度材质表单，它使用numberMaskOptions将字段值的输入和显示限制为3个小数点。（见下面的代码）

这很好，但客户现在希望限制字段的“显示”仅显示2个小数点，但希望允许用户在同一字段中最多输入3个小数点

换句话说，当光标不在字段中时，应显示2个精度小数点，但当用户进入字段进行编辑时，应允许3个精度小数点

对于物料输入字段，这是否可行？如果是，怎么做？如果没有，我应该如何处理这个问题

昆虫体型

带着我的面具

threeDecPrecisionDecimalMaskOptions={
对齐：“右”，
allowNegative:false，
小数分隔符：''.''，
精度：3，
前缀：“”，
后缀：“”，
千分之一，
valueMode:'标准'，
};

---

这允许我在字段形式中输入和查看3个小数点的值。

不久前，我制作了一个atribute指令来制作一些类似的值，您可以在中看到，我不知道您是否可以使用，因为您还有一个指令来屏蔽数字

代码如下：

@Directive({ selector: "[decimal2]" })
export class Decimal2 implements OnInit {
  private el: HTMLInputElement;
  private value: any;
  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }
  @HostListener("focus", ["$event.target.value"])
  onFocus() {
    this.el.value = this.value;
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value: any) {
    this.transform(value);
  }
  ngOnInit() {
    this.transform(this.el.value);
  }
  transform(value: any) {
    this.value = value;
    if (value && !isNaN(value)) {
      const aux = "" + Math.round(+this.value * 100);
      this.el.value = aux.slice(0, -2) + "." + aux.slice(-2);
      if (this.el.value.indexOf(this.value) >= 0) this.value = this.el.value;
    }
  }
}

已更新我们可以使用变换函数中的角度格式编号来改进指令

  transform(value: any) {
    this.value = value;
    if (value && !isNaN(value)) {
      this.el.value=formatNumber(+this.value, "en-US", '1.2-2');
      const formated=this.el.value.split(',').join('')
      if (formated.indexOf(this.value) >= 0) this.value = formated;
    }
  }

---

在看这个的时候，它实际上并不能满足我的需要。我需要编辑字段以允许3位数字，但一旦发生onBlur（失焦）事件，我需要字段的显示始终达到四舍五入的2位精度。使用您给出的示例，它对两个指令都保持相同的精度设置。指令小数2仅以模糊形式显示四舍五入为两位数的数字，我不知道您的

appNumberMask

是否存在冲突，如果您同时使用两个指令，我更新了stackblitz，添加了该指令，我觉得它看起来不错。记住，您需要同时使用这两个指令