13

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?

Improve this question
6
  • What a difference between parameters "disabled" and "readonly"? In my opinion both parameters works in a similar way.
    – Siarhey Uchukhlebau
    Oct 14, 2016 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, 2016 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, 2016 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, 2016 at 10:49
  • Leave formElement as input and add text elementTmpl like this <item name="elementTmpl" xsi:type="string">ui/form/element/text</item> Refer: magento.stackexchange.com/a/296735/14271
    – Magento_Newbie
    Feb 29, 2020 at 1:12

2 Answers 2

Reset to default
27

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

Improve this answer
8
  • 2
    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, 2016 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, 2017 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, 2017 at 14:07
  • I also have to same like issue.. I want to enable price field for configurable product.. Here I have explained link
    – gks
    Apr 26, 2017 at 13:33
  • @Marius, How to make field disabled only in edit form not in new form?
    – Vinaya Maheshwari
    Jul 15, 2017 at 5:25
4

For new version of Magento, you need to use <disabled>true</disabled> instead of <item name="disabled" xsi:type="boolean">true</item>

In fact, we don't use <item> in <field> anymore.

Ex:

<field name="sales_id" sortOrder="90" formElement="input">
    <settings>
        <dataType>text</dataType>
        <label translate="true">Sales ID</label>
        <dataScope>sales_id</dataScope>
        <disabled>true</disabled>
    </settings>
</field>
Improve this answer
2
  • 1
    good point, but one remark...you don't "need" to use this approach. It is "recommended" to use that. The old way of doing it still works.
    – Marius ♦
    Nov 26, 2021 at 9:26
  • 1
    @Marius yes, this is for someone who looking for the new recommended version, which isn't use <item>.
    – fudu
    Nov 29, 2021 at 2:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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