Question

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.

Eliseo · Accepted Answer · 2020-06-20T09:26:03.110

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

In looking at this, it doesn't actually do what I need. I need the editing of the field to allow 3 digits, but once the onBlur (out of focus) event happens I need the display of the field to always go to rounded 2 digit precision. Using the example you've given, it keeps the same precision set for both — Kim Gentes, Jun 19 '20 at 17:42
the directive Decimal2 ONLY show in blur the number rounded to two digits, I don't know about your `appNumberMask` and I don't know if there a conflit if you use the two directive together — Eliseo, Jun 20 '20 at 08:57
I updated the stackblitz adding the directive in https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field/54462816#54462816 and I feel it's looks good. Remember you need use the **two directives toghether** — Eliseo, Jun 20 '20 at 09:02

1 Answers1

Linked