surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.01k stars 782 forks source link

Numeric Input Mask - Introduce an option to enforce the input format based on the digit precision (0.00) #8328

Open JaneSjs opened 1 month ago

JaneSjs commented 1 month ago

T18363 - Numeric input mask format https://surveyjs.answerdesk.io/internal/ticket/details/T18363


Usage scenario: a numeric mask allows entering up to two decimal places. image image

However, when a user enters a numeric value without entering a decimal part, the decimal part is not present in a resultant value. image

Introduce an option to format a numeric value according to the decimal part precision (e.g., 1.00).

vytas-bunevicius commented 3 weeks ago

Found a possible solution:


public getMaskedValue(src: number): string {
    let input: string = src === undefined || src === null ? '' : src.toString();
    input = input.replace('.', this.decimalSeparator);
    const isValidNumber = !isNaN(parseFloat(input));
    if (isValidNumber) {
      if (input.includes(this.decimalSeparator)) {
        const decimalIndex = input.indexOf(this.decimalSeparator);
        const currentPrecision = input.length - decimalIndex - 1;
        if (currentPrecision < this.precision) input += '0'.repeat(this.precision - currentPrecision);
      } else {
        input += this.decimalSeparator + '0'.repeat(this.precision);
      }
    }
    return this.getNumberMaskedValue(input, true);
  }
JaneSjs commented 1 week ago

This would be also useful for the following usage scenario: T18699 - How to send decimal number to api from a number type text box?.

JaneSjs commented 1 week ago

T18756 - decimalseparator on the question value https://surveyjs.answerdesk.io/internal/ticket/details/T18756