Drupal 8多值字段表单小部件隐藏最后一项的实现方法

我之前在做Drupal多值字段开发时正好碰到过这个一模一样的问题！当时也是用hook_form_alter隐藏空项后，点add-more直接蹦出来两项，折腾了好一会儿才找到根源——问题出在AJAX回调依赖的delta计数上，直接删除空项会让系统误以为当前的最大delta比实际小1，导致点击时多创建了一个。下面是我验证过可行的解决办法：

后端正确处理方案（推荐） #

核心思路是不要删除空的delta项，而是通过#access属性隐藏它，这样AJAX逻辑依然能正确识别当前的delta总数，避免计数错误。

1. 用hook_form_alter隐藏空项（而非删除） #

function custom_module_form_alter(&$form, &$form_state, $form_id) {
    // 替换成你的多值字段机器名
    $target_field = 'field_your_multivalue_field';
    
    if (isset($form[$target_field])) {
        // 获取字段下的所有delta项（Drupal 7/8/9结构略有差异，这里以通用写法为例）
        $langcode = key($form[$target_field]);
        $delta_items = element_children($form[$target_field][$langcode]);
        
        if (!empty($delta_items)) {
            $last_delta = end($delta_items);
            // 检查最后一项是否为空（根据你的字段类型调整判断逻辑，比如文本字段看value）
            $is_empty = empty($form_state['values'][$target_field][$langcode][$last_delta]['value'] ?? '');
            
            if ($is_empty) {
                // 隐藏空项，但保留元素结构供AJAX计数使用
                $form[$target_field][$langcode][$last_delta]['#access'] = FALSE;
            }
        }
    }
}

2. 自定义AJAX回调确保只添加一项（可选） #

如果上面的方法在某些场景下还是有问题，可以替换默认的add-more按钮AJAX回调，强制只生成一个新项：

function custom_module_field_add_more_js($form, $form_state) {
    $trigger = $form_state['triggering_element'];
    $field_name = $trigger['#field_name'];
    $langcode = $trigger['#language'];
    
    // 获取当前所有delta项（包括隐藏的空项）
    $delta_items = element_children($form[$field_name][$langcode]);
    $last_delta = end($delta_items);
    
    // 确保新添加的项是可见的
    $form[$field_name][$langcode][$last_delta + 1]['#access'] = TRUE;
    
    // 返回更新后的字段区域
    return $form[$field_name][$langcode];
}

然后在hook_form_alter里替换回调：

$form[$target_field][$langcode]['add_more']['#ajax']['callback'] = 'custom_module_field_add_more_js';

前端辅助方案（备选） #

如果后端调整有局限性，也可以用CSS+JS的组合快速解决：

1. CSS隐藏空项 #

/* 替换成你的字段对应的CSS类 */
.field--name-field-your-multivalue-field .field-multiple-item:last-child:not(.filled) {
    display: none;
}

2. JS修复AJAX添加逻辑 #

(function ($) {
    Drupal.behaviors.hideEmptyMultivalueItem = {
        attach: function (context, settings) {
            // 监听add-more按钮点击
            $('input[name*="add_more"]', context).once('hide-empty-handler').on('click', function() {
                var $fieldWrapper = $(this).closest('.field-multiple-wrapper');
                // AJAX完成后确保新添加的项可见
                $fieldWrapper.one('ajaxComplete', function() {
                    $fieldWrapper.find('.field-multiple-item:last-child').show();
                });
            });
        }
    };
})(jQuery);

关键总结 #

千万不要直接unset空的delta项，这会破坏AJAX回调依赖的delta计数逻辑。隐藏而非删除是解决这个问题的核心，无论是后端用#access还是前端用CSS，都要保留空项的结构，让系统能正确计算下一个要添加的delta值。

内容的提问来源于stack exchange，提问作者jmux