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.
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.
i want to type 6 characater only like 123456 not a range from 1 to 50
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
How about i use number and maxlength. Is that OK ?
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