UI Component Form Validation: Pattern method

Question

I've got an admin ui_component form which has a listing of fields and I'm adding validation to them. One I'd like to use a custom pattern. The form in general works, it's just this "pattern" validation that's causing an issue.

So here is the relevant <field> setup from my module_controller_form.xml file:

    <field name="my_custom_filed">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">My Custom Filed</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">model_name</item>
                <item name="dataScope" xsi:type="string">my_custom_field</item>
                <item name="sortOrder" xsi:type="number">1</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                    <item name="no-whitespace" xsi:type="boolean">true</item>
                    <item name="validate-pattern" xsi:type="string">/^[a-z][a-z0-9_.-]$/i</item>
                </item>
            </item>
        </argument>
    </field>

The above generally works. I get a javascript error about the string /^[a-z][a-z0-9_.-]$/i not having the method test(). According to validation.js I see the content for the pattern validation method as being:

    "pattern": [
        function (value, element, param) {
            return this.optional(element) || param.test(value);
        },
        'Invalid format.'
    ],

When this code runs, it runs with the following invocation:

validations['pattern']('Test String', [element], "/^[a-z][a-z0-9_.-]$/i")

Sadly, it is passing the value of the <item> node as a string, instead of translating that to a RegExp object.

Is there a way to specify the validation pattern from the *_form.xml and have it properly transform the value to a regular expression object? I haven't really seen any core modules use this validation within their XML declarations, but it seems like it should still work.

UPDATE

I'm still looking into this, trying to find where the form XML for the validation node is translated into the javascript bindings. Does anyone know where I can start searching for that?

Answer 1

This appears to be a core bug within Magento itself. The string for the regular expression isn't being converted properly using new RegExp() or if you provide a native regular expression (e.g. /[a-z][a-z0-9]+/i) it's not interpreted as such.

I submitted the issue via GitHub and confirmed that it exists in Magento CE 2.1.7 as well as the EE. Hopefully they fix the bug in the next release.

https://github.com/magento/magento2/issues/9919

EDIT: As of Magento 2.2.2 this has been fixed.