Create a field to insert number only with ui compo...

annq3sivn4281 · ‎07-22-2022

i am struggling to create 2 differences field in admin form, in order to insert number only. Can anybody suggest me to make 2 fields.

I want to create 2 fields: employee_number and employee_insurance. Also, the field has a limit number like employee_number can only insert 6 number.

Please help me, i am very appreciate it.

Bhanu Periwal · ‎07-22-2022

Hello @annq3sivn4281

Kindly refer below code for ui_component , where you can set range of number and add validation for numeri value:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">employee_form.employee_form_data_source</item>
            <item name="deps" xsi:type="string">employee_form.employee_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Employee Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">employee_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <dataSource name="employee_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Custom\UiForm\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">employee_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="employee_details">
        <field name="employee_salary">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Employee Salary</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">employee_salary</item>
                    <item name="validate-number" xsi:type="boolean">true</item>
                    <item name="validate-number-range" xsi:type="string">1.00-50.00</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

These two are use for validation. Please try with this.

<item name="validate-number" xsi:type="boolean">true</item>

<item name="validate-number-range" xsi:type="string">1.00-50.00</item>

It may help you!
Thank you.

Problem solved? Click Accept as Solution!

annq3sivn4281 · ‎07-22-2022

i want to type 6 characater only like 123456 not a range from 1 to 50

Bhanu Periwal · ‎07-22-2022

Hello @annq3sivn4281

In that case, you need to customize code by using reference of below code:

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <link src="Vendor_Module::js/form/validation.js"/>
        </head>
   </page>

Added js file Vendor/Module/view/frontend/web/js/form/validation.js with below code:
require(
    [
        'Magento_Ui/js/lib/validation/validator',
        'jquery',
        'mage/translate'
    ], function(validator, $){

        validator.addRule(
            'barcode-validation',
            function (value) {
                if(value.length !== 6){
                    return false;
                }else {
                    return true;
                }
            }
            ,$.mage.__('6 characters required.')
        );
    });

And in the ui component form added the custom validator name

<field name="emp_salary">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Salary</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">salary</item>
                    <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/input</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <item name="barcode-validation" xsi:type="number">13</item>
                    </item>
                </item>
             </argument>
 </field>

It may help you!
Thank you

Problem solved? Click Accept as Solution!

annq3sivn4281 · ‎07-22-2022

How about i use number and maxlength. Is that OK ?

Bhanu Periwal · ‎07-22-2022

Hello @annq3sivn4281

Validation can be manage by JS code only. So I have shared with you.
You need to add within custom module for this.

Thanks

Problem solved? Click Accept as Solution!

Create a field to insert number only with ui component

Create a field to insert number only with ui component

Re: Create a field to insert number only with ui component

Re: Create a field to insert number only with ui component

Re: Create a field to insert number only with ui component

Re: Create a field to insert number only with ui component

Re: Create a field to insert number only with ui component