How to disable an UI component field while add new item and enable while editing?

Question

Hi i'm new at magento 2 and i want to disable Ui Component field while creating item, and enable the field while editing.

Well, following this tutorial: Disabling a UI component field upon condition in Magento 2

The tutorial is the opposite of what i was looking out, it only works to Disable while editing and not while add. I want to disable while add, and enable while editing.

DataProvider:

class DataProvider extends AbstractDataProvider

{ /** * @var ResourceModel\Data\Collection */ protected $collection;

/**
 * @var DataPersistorInterface
 */
protected $dataPersistor;

/**
 * @var array
 */
protected $loadedData;

/**
 * @param string $name
 * @param string $primaryFieldName
 * @param string $requestFieldName
 * @param CollectionFactory $pageCollectionFactory
 * @param DataPersistorInterface $dataPersistor
 * @param array $meta
 * @param array $data
 */
public function __construct(
    $name,
    $primaryFieldName,
    $requestFieldName,
    CollectionFactory $pageCollectionFactory,
    DataPersistorInterface $dataPersistor,
    array $meta = [],
    array $data = []
) {
    $this->collection    = $pageCollectionFactory->create();
    $this->dataPersistor = $dataPersistor;
    $this->meta          = $this->prepareMeta($this->meta);
    parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}

/**
 * Prepares Meta
 *
 * @param array $meta
 * @return array
 */
public function prepareMeta(array $meta)
{
    return $meta;
}

/**
 * Get data
 *
 * @return array
 */
public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }
    $items = $this->collection->getItems();
    foreach ($items as $page) {
        $this->loadedData[$page->getId()] = $page->getData();
    }
    $data = $this->dataPersistor->get('module_messages');
    if (!empty($data)) {
        $page = $this->collection->getNewEmptyItem();
        $page->setData($data);
        $this->loadedData[$page->getId()] = $page->getData();
        $this->dataPersistor->clear('module_messages');
    }

    if($_SESSION['action'] == 'edicao' AND isset($page)){
        $this->loadedData[$page->getId()]['do_we_hide_it'] = true;
    }
    return $this->loadedData;
}

}

form.xml

<field name="nome_header" formElement="input">
        <argument name="nmh" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">nmh</item>
            </item>
        </argument>
        <settings>
            <imports>
                <link name="disabled">${ $.provider}:data.edit</link>
            </imports>
            <validation>
                <rule name="required-entry" xsi:type="boolean">false</rule>
            </validation>
            <dataType>text</dataType>
            <label translate="true">Nome Header</label>
            <dataScope>nome_header</dataScope>
        </settings>
    </field>

Answer 1

1. you can do so just by checking if your Entity id exists In your data provider.

   public function getData()
   {
      if (!empty($this->loadedData)) {
        return $this->loadedData;
      }
   
      $items = $this->collection->getItems();
      foreach ($items as $page) {
         $rec = $page->getData();
         $rec['edit'] = true; // true when the data is set for edit form. it can be any variable name
         $this->loadedData[$page->getId()] = $rec;
     }
   
     return $this->loadedData;
   }
   

And then at your field in ui-component form check for the edit variable inside the imports tag

   <field name="to_hide_feild">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">10</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Title</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="dataScope" xsi:type="string">title</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
                <item name="imports" xsi:type="array">
                    <item name="disabled" xsi:type="string">${ $.provider}:data.edit</item>
                </item>
            </item>
        </argument>
    </field>

if someone is using different pattern for fields in ui-component then this code will work.

    <field name="nome_header" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">customer</item>
                </item>
            </item>
        </argument>
        <settings>
            <imports>
                <link name="disabled">${ $.provider}:data.edit</link>
            </imports>
            <validation>
                <rule name="required-entry" xsi:type="boolean">false</rule>
            </validation>
            <dataType>text</dataType>
            <disabled>true</disabled>
            <label translate="true">Nome Header</label>
            <dataScope>data</dataScope>
        </settings>
    </field>