<input matInput ... (Angular material form) input上允许3个小数点，但只显示2个小数点 [英] <input matInput ... (Angular material form) Allow 3 decimal points on input, but only display 2 decimal points

问题描述

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

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

也就是说，当光标不在该字段中时，它应该显示2个小数点的精度，但是当用户进入该字段进行编辑时，它应该允许3个小数点的精度.

这对材料 matInput 字段是否可行?如果是这样怎么办?如果没有，我还应该如何处理?

 
<mat-form-field myAppTooltip><mat-label>昆虫体型</mat-label><输入自动完成=关闭"应用号码掩码formControlName="InsectBodySizeSmm"垫输入最大=99999"分钟=0"[numberMaskOptions]="threeDecPrecisionDecimalMaskOptions"/><mat-error></mat-error></mat-form-field>

带着我的面具

threeDecPrecisionDecimalMaskOptions = {对齐:'正确'，允许负:假，十进制分隔符:'.',精度:3，字首: ''，后缀: ''，千位分隔符:'',值模式:'标准'，};

这使我可以在字段表单中输入和查看 3 位小数点的值.

解决方案

前段时间我做了一个atribute指令来做一些类似的，你可以在这个链接，不知道你能不能用，因为你也有屏蔽号码的指令.

代码如下:

@Directive({ 选择器:[decimal2]"})导出类 Decimal2 实现 OnInit {私人 el: HTMLInputElement;私人价值:任何；构造函数(私有元素引用:元素引用){this.el = this.elementRef.nativeElement;}@HostListener("focus", ["$event.target.value"])焦点(){this.el.value = this.value;}@HostListener("blur", ["$event.target.value"])onBlur(值:任何){this.transform(value);}ngOnInit() {this.transform(this.el.value);}变换(值:任何){this.value = 值；如果(值&& ！isNaN(值)){const aux ="+ Math.round(+this.value * 100);this.el.value = aux.slice(0, -2) + ."+ 辅助切片(-2)；如果 (this.el.value.indexOf(this.value) >= 0) this.value = this.el.value;}}}

更新我们可以使用转换函数中的角格式数来改进我们的指令

 变换(值:任意){this.value = 值；如果(值&& ！isNaN(值)){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;}}

I have a regular angular material form that uses numberMaskOptions to limit the input and display of the field value to 3 decimal points. (see code below)

This is fine, but the customer now wants to limit the "display" of the field to show just 2 decimal points, but wants to allow the user to enter up 3 decimal points in the same field.

In other words, when the cursor is not in the field, it should display 2 decimal points of accuracy, but when the user enters the field to edit it, it should allow 3 decimal points of accuracy.

Is this possible with material matInput fields? If so how? If not, how else should I approach this?

    <div *ngIf="isFieldVisible">
      <mat-form-field myAppTooltip>
        <mat-label>Insect Body Size</mat-label>
        <input
          autocomplete="off"
          appNumberMask
          formControlName="InsectBodySizeSmm"
          matInput
          max="99999"
          min="0"
          [numberMaskOptions]="threeDecPrecisionDecimalMaskOptions"
        />
        <mat-error></mat-error>
      </mat-form-field>
    </div>

with my mask being

threeDecPrecisionDecimalMaskOptions = {
      align: 'right',
      allowNegative: false,
      decimalSeparator: '.',
      precision: 3,
      prefix: '',
      suffix: '',
      thousandsSeparator: '',
      valueMode: 'standard',
    };

That allows me to input and view values in the field form to 3 decimal points.

解决方案

Some time ago I make a atribute directive to make some similar, you can see in this link, I don't know if you can use because you has also a directive to mask the number.

The code is as is:

@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;
    }
  }
}

Updated we can inprove our directive using the angular formatNumber in the transform function

  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;
    }
  }

这篇关于<input matInput ... (Angular material form) input上允许3个小数点，但只显示2个小数点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！