Override Delimiter and Decimal Separator

Formio.js uses browser locale settings, to place the delimiter and decimal separator in Currency and Number Components. This gives browser to control the delimiter based on the language, sometimes the browser doesn't take correct settings for some languages, in this case, the user is allowed to override it, choosing the language and pass in the decimal separator and delimiter to the form it self. The next example show how to override the browser locale for Currency and Number Components.

Create Form

This example includes a simple HTML that has a Form.io style sheet, the Core library and a div where createForm method will render the form.

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div id="formio"></div>

During the createForm method, the first parameter determines where to render the form. This example targets the HTML <div> element with the formio Id. The second parameter accepts either a form path (URL String) or the form component directly. The third parameter handles form options such as readOnly or in this case, the languageOverride property.

Formio.createForm(document.getElementById('formio'), 'https://nyycarismsxlmbj.form.io/overridelanguage', {
 languageOverride: {
   'en-US': {
    decimalSeparator: '.',
    delimiter: ','
   }
 }
}).then(function(form) {
  // On form submit check the submission.
  form.on('submit', function(ev, submission){
    console.log(submission);
  })
});

Note that in the en-US language the delimiter is (",") and the decimal separator is (".") this means that 10000.00 must be shown as 10,000.00 before languageOverride.

After the languageOverride, 10000.00 should be shown 10.000,00 since we passed as the languageOverride property and changed the delimiter and decimal separator.