Add format mask to field

Hello Ezequiel!

There is a pretty universal instruction for adding a field mask. It is originally meant to create a mask for a phone number, but you can adjust it as much as required.

First of all there is a control attached, which allows you to enter information using the array of masks.

To use it you need to add this module to the page dependency and to define section and include in page diff that MultiMaskEdit class and its mask have to be used. 

{
                    "operation": "merge",
                    "name": "MobilePhone",
                    "values": {
                                         "controlConfig": {
                                                             className: "Terrasoft.controls.MultiMaskEdit",
                                                             mask: {
                                                                                 formats: ["+7(999)999-99-99", "+380(99)999-99-99"]
                                                             },
                                                             onBeforePasteFormatValue: TSCCommon.getDigitsFromString
                                         }
                    }
}

You include onBeforePasteFormatValue method only if you want to parse input value before pasting it into control. This method is not required - control will insert only allowed values, however if you, for example, need to parse the string and insert only numeric values - for the mask above, the phone number will be inserted completely, regardless which symbols were used additionally.

The default symbols for mask input are:

{
                    //numbers
                    "9": {
                                         re: "[0-9]"
                    },
                    //cyryllic
                    "к": {
                                         re: "[а-яА-ЯёЁ]"
                    },
                    //latin
                    "l": {
                                         re: "[a-zA-Z]"
                    },
                    //any letter
                    "c": {
                                         re: "[а-яА-ЯёЁa-zA-Z]"
                    },
                    //any letter or number
                    "#": {
                                         re: "[а-яА-ЯёЁA-Za-z0-9]"
                    }
}

You can choose your own symbol for mask template using maskConfig. You indicate the regular expression in re:. Also you need to indicate the symbol, that substitutes the empty values in placeHolderChar. For example you can create a mask that will allow you to enter ISBN codes where 978 are numbers and "0" is a substitute symbol.

{
                    className: 'Terrasoft.controls.MultiMaskEdit',
                    value: {
                                         bindTo: 'ISBN'
                    },
                    mask: {
                                         formats: ["978-0-000-00000-0"]
                    },
                    maskConfig: {
                                         definitions: {
                                                             //numbers
                                                             "0": {
                                                                                 re: "[0-9]"
                                                             },
                                                             placeHolderChar: "_"
                                         }
                    }
}

There is an issue, though, control validation is not passed to the card model, it means that even though the control shows that the value is invalid the card will be saved.

Hope it helps!

Hello Matt!

Thanks you for the response.

Can you said me how import the attached file in the system?. In the "Configuration" section, under "Actions" options, I do click in "Import from file", I select the file MultiMaskEdit.js and I get a error when want load the file. I appreciated your help!

King Regards,

Ezequiel Gómez

Hello Matt! How are you? I hope you are well. Any idea? Thank you! Regards!

Matt Watts,

Hello Matt. You know if there is a way to do this but dinamic. For example depends of the country change the format of the mask?

Thanks,