10

I have this ui-component definition of a form field In my Magento 2 module.

    <field name="name">
        <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">Some Label</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">something_here</item>
                <item name="sortOrder" xsi:type="number">10</item>
                <item name="dataScope" xsi:type="string">name</item>
                <item name="notice" xsi:type="string" translate="true">Enter something here</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>

and I'm trying to make it readonly. Not disabled. Just readonly.
I tried adding:

<item name="readonly" xsi:type="boolean">true</item>  

to the config section, but obviously I failed.
How can I make the field readonly? Can I make the field readonly?

  • What a difference between parameters "disabled" and "readonly"? In my opinion both parameters works in a similar way. – Siarhey Uchukhlebau Oct 14 '16 at 10:29
  • 1
    From what I know, disabled means the field is not sent via post and readonly is sent. My plan is to modify the value of the readonly field via some javascript. – Marius Oct 14 '16 at 10:34
  • Sure, but in regular magento form (not ui) the "readonly" attribute means the html-attribute "disabled". In other way you should use a custom component or a custom script, becouse the "readonly" attribute nonexists for the ui-components. – Siarhey Uchukhlebau Oct 14 '16 at 10:44
  • I'm just going to stick with your answer now. I just hope I don't actually need to make a field disabled in the future. – Marius Oct 14 '16 at 10:49
16

Try to add the disabled parameter to the element like this:

<field name="is_active">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Status</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">checkbox</item>
            <item name="source" xsi:type="string">vendor_rules_rule_form.vendor_rules_rule_form_data_source.is_active</item>
            <item name="prefer" xsi:type="string">toggle</item>
            <item name="disabled" xsi:type="boolean">true</item>
            <item name="valueMap" xsi:type="array">
                <item name="true" xsi:type="string">1</item>
                <item name="false" xsi:type="string">0</item>
            </item>
            <item name="sortOrder" xsi:type="number">12</item>
        </item>
    </argument>
</field>

Result should be similar with the readonly parameter for the regular form element:

result

  • 1
    I'm puzzled here. it works, but it looks wrong to me. If the field is disabled how come is still sent via POST? Anyway, this is a different question. I'll take this for granted for now. – Marius Oct 14 '16 at 10:34
  • 5
    @Marius This is most likely because when a form is submitted from the backend, it's not the actual form that is submitted but a new form with hidden fields that is created when you click save. The form is created according to the fields in your UI Components XML-file and fields that are marked with data-form-part. Take a look at module-ui/view/base/web/js/form/form.js::initConfig(), validate() and submit(). Also look at lib/mage/utils/misc.js::submit(). These combined add a new form at the end of the body that is actually submitted. – Giel Berkers Jan 16 '17 at 14:00
  • @GielBerkers. I've done some research after asking this question and I came to the same conclusion as you explained. You are right. The submitted data does not come from a form. – Marius Jan 16 '17 at 14:07
  • I also have to same like issue.. I want to enable price field for configurable product.. Here I have explained link – Gopal Kacha Apr 26 '17 at 13:33
  • @Marius, How to make field disabled only in edit form not in new form? – Vinaya Maheshwari Jul 15 '17 at 5:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.