Disable /Enable a multivalued paragraph field on Ajax calls

Question

I have 2 fields in a form. One select list and another entity reference field referring to a Paragraph type (multivalued). The on-change event should trigger an ajax callback which will disable some of the fields in the paragraph type. I managed to achieve this on ajax callback. Now, the problem is when I add more values to the paragraph the previous disabled field goes back to the default state. Any suggestions /examples will be helpful. Below is my code. Thanks.

    function hook_form_alter(&$form, FormStateInterface $form_state, $form_id) {
      //Ajax callback on change event
      if (isset($form['field_link_type'])) {
        $form['field_select_sample']['widget']['#ajax'] = array(
        'callback' => '_my_ajaxcallback',
        'event' => 'change',
       );
      }
     }

    function _my_ajaxcallback(array $form, FormStateInterface $form_state) {


      $response = new \Drupal\Core\Ajax\AjaxResponse();

      //disable field_htext of paragraph field
      $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.field--name-field-htext input', 'attr', array('disabled', 'disabled')));

      return $response;
    }

Updated code - In my callback -

    echo 'disabled - ' . $form_state->get('field_header_disabled');`
    $form_state->set('field_header_disabled', TRUE);`
    echo $form_state->get('field_header_disabled');
    return $response;

The output is something like - disabled - 1 on both first and second callbacks. On second callback I'm expecting the output to be something like disabled - 11

Answer 1

Your issue arises, as the paragraphs widget(s) itself do a lot of Ajax calls and you disable the field(s) in your browser only. So your paragraph form will be reloaded and re-rendered without knowing that the field has been disabled before.

To have the field(s) disabled on consecutive reloads, you need to make your changes more permanent.

You could e.g., save a flag to the $form_state using the FormStateInterface::set() method:

FormStateInterface
[...] it may be used to store information related to the processed data in the form, which will persist across page requests when the 'cache' or 'rebuild' flag is set.

This means, after you stored a custom flag in the $form_state and an ajax request to reload this form is made, it will be available within the $form_state of your hook_form_alter() implementation as well.

So all we have to do now, is checking for this flag in hook_form_alter() using the FormStateInterface::get() method and ensure the field will be disabled, if it has been set before.

A less abstract example:

/**
 * Callback for disabling field_htext.
 */
function _my_ajaxcallback(array $form, FormStateInterface $form_state) {
  $response = new \Drupal\Core\Ajax\AjaxResponse();

  // Disable field_htext of paragraph field.
  $response->addCommand(new \Drupal\Core\Ajax\InvokeCommand('.field--name-field-htext input', 'attr', array('disabled', 'disabled')));

  // Set a 'disabled' flag in form state.
  $form_state->set('field_htext_disabled', TRUE);

  return $response;
}

And in your form alter:

/**
 * Implements hook_form_alter().
 */
function hook_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Better use the form ID here and check, if you are at
  // your form in question, or even use a more specific hook as
  // hook_form_BASE_ID_alter() or hook_form_FORM_ID_alter().

  // Check our custom disabled flag.
  if (
    !empty($form_state->get('field_htext_disabled'))
    && isset($form['field_htext'])
  ) {
    // Set the 'disabled' attribute.
    $form['field_htext']['widget'][0]['value']['#attributes']['disabled'] = 'disabled';
  }

  // Add ajax callback on change event.
  if (isset($form['field_link_type'])) {
    $form['field_select_sample']['widget']['#ajax'] = array(
    'callback' => '_my_ajaxcallback',
    'event' => 'change',
   );
  }
 }