Question T14609
Visible to All Users

inputMask dynamic prefix and digits

created a year ago

Hello,

I am hoping you can help me once again please.

I have a question that asks for an amount and I have been trying to implement inputMask: 'currency'. I would like to change the prefix and numericDigits values based on the answer to a previous question 'currency'.

I can't seem to be able to change the prefix or number of digits once set. I have tried getting that questionModel and changing the prefix and numericDigits properties. I have tried creating a javascript object that stores a string for the symbol then telling the question in the JSON to look at the object but that doesn't work.

ChatGPT thinks you implement the use of inputMask using inputMask: { mask: "currency", prefix: "£" } so that doesn't know the answer. I have tried saving the required symbol to survey.data but inputMask can't read from the survey data. I have tried re-rendering the question once the prefix has been changed but it doesn't make a difference.

Maybe the answer is that it is impossible but, just in case, is there a way to dynamically update the prefix and numericDigits values for inputMask within SurveyJS or do I need to find an alternative approach to showing the correct currency symbol?

Thanks for all your previous help,
Stuart

Answers approved by surveyjs Support

created 8 months ago

Hello Stuart,
Please note that with v1.9.139 and newer, SurveyJS Form Library includes the masked input feature out of the box.

If you wish to change the prefix and number of digits based on another question's value, you can use the survey.onValueChanged event and update the prefix and precision properties accordingly.

Please refer to the following demo: View Plunker.

Should you have any further questions, we are always here to help.

    created a year ago (modified a year ago)

    Hello Stuart,
    If you wish to use other question values to define a prefix and a number of digits for a masked field, you can follow these steps.

    • Override the Inputmask widget implementation.
      You can access the source code of an Inputmask widget at inputmask.js. Copy this code within your application to override it.

    • Register custom properties of the "expression" type.
      Within the activatedByChanged function of a custom widget, register custom prefixExpression and numericDigitsExpression settings of the "expression" type. Expression type properties allow you to define an expression which would be evaluated to set a question property. Within the onExecuteExpression function, update a question's property (prefix/numericDigits) and call the this.applyInputMask function to update a field's input mask.

    Consider the following demo: View Demo.

    JavaScript
    activatedByChanged: function (activatedBy) { ... Survey.Serializer.addProperty("text", { name: "prefixExpression", type: "expression", category: "logic", onExecuteExpression: (surveyElement, res) => { if (!res) return; surveyElement.prefix = res; // Update an inputmask widget let input = document.getElementById(surveyElement.inputId); this.applyInputMask(surveyElement, input); } }); Survey.Serializer.addProperty("text", { name: "numericDigitsExpression", type: "expression", category: "logic", onExecuteExpression: (surveyElement, res) => { if (!res) return; debugger; surveyElement.numericDigits = res; // Update an inputmask widget let input = document.getElementById(surveyElement.inputId); this.applyInputMask(surveyElement, input); } }); ...

    For more information on custom properties and their settings, refer to the following guide: Survey Element Property Settings.

    • Finally, bind those prefixExpression and numberOfDigitsExpression properties to survey element questions. For this, enclose survey question names within square brackets.
    JSON
    { elements: [ { name: "qPrefix", type: "text", title: "Prefix" }, { name: "qNumberOfDigits", type: "text", title: "Number of digits", inputType: "numeric" }, { name: "currency", type: "text", title: "Currency:", inputMask: "currency", prefixExpression: "{qPrefix}", numericDigitsExpression: "{qNumberOfDigits}" } ] }

    Clipboard-File-1.png

    I hope this option can help you. Please let me know if you have any further questions.

    P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.