Question

У меня есть обычная форма angular материала, в которой используется numberMaskOptions для ограничения ввода и отображения значения поля до 3 десятичных знаков. (см. код ниже)

Это нормально, но теперь клиент хочет ограничить «отображение» поля, чтобы отображать только 2 десятичных знака, но хочет разрешить пользователю вводить 3 десятичных знака в то же поле.

Другими словами, когда курсор не находится в поле, он должен отображать 2 десятичных знака точности, но когда пользователь вводит поле для редактирования, он должен допускать 3 десятичных знака точности .

Возможно ли это с полями matInput материала? Если да, то как? Если нет, то как еще мне подойти к этому?

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

с моей маской

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

Это позволяет мне вводить и просматривать значения в форме поля с точностью до 3 десятичных знаков.

Answer 1

Некоторое время go я делаю директиву атрибутов, чтобы сделать что-то похожее, вы можете увидеть в эту ссылку , я не знаю, можете ли вы использовать, потому что у вас также есть директива для маскировки number.

Код как есть:

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

Обновлено мы можем улучшить нашу директиву, используя angular formatNumber в функции преобразования

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