如何为FilamentPHP v2 Repeater项添加删除确认模态框？

方法一：通过JavaScript拦截删除按钮点击（无需修改组件代码） #

Filament v2的Repeater删除按钮带有统一类名.filament-repeater-delete-button，可以监听点击事件阻止默认提交，先弹出确认模态框，用户确认后再执行删除：

document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(e) {
        const deleteButton = e.target.closest('.filament-repeater-delete-button');
        if (!deleteButton) return;

        e.preventDefault();
        e.stopPropagation();

        // 调用Filament内置模态框
        const modal = new FilamentModal({
            title: '确认删除',
            description: '你确定要删除这一项吗？此操作无法撤销。',
            actions: [
                {
                    label: '取消',
                    method: 'close',
                },
                {
                    label: '删除',
                    method: function() {
                        deleteButton.querySelector('form').submit();
                        modal.close();
                    },
                    danger: true,
                },
            ],
        });

        modal.open();
    });
});

将这段代码添加到资源页面的registerScripts方法中：

// 例如在CreatePage或EditPage类中
protected function registerScripts(): void
{
    parent::registerScripts();

    $this->registerScript(<<<JS
        document.addEventListener('DOMContentLoaded', function() {
            document.addEventListener('click', function(e) {
                const deleteButton = e.target.closest('.filament-repeater-delete-button');
                if (!deleteButton) return;

                e.preventDefault();
                e.stopPropagation();

                const modal = new FilamentModal({
                    title: '确认删除',
                    description: '你确定要删除这一项吗？此操作无法撤销。',
                    actions: [
                        {
                            label: '取消',
                            method: 'close',
                        },
                        {
                            label: '删除',
                            method: function() {
                                deleteButton.querySelector('form').submit();
                                modal.close();
                            },
                            danger: true,
                        },
                    ],
                });

                modal.open();
            });
        });
    JS);
}

方法二：自定义Repeater组件并重写视图 #

如果需要更灵活的控制逻辑，可以自定义Repeater组件：

1. 创建自定义Repeater类：

namespace App\Filament\Components;

use Filament\Forms\Components\Repeater;

class ConfirmableRepeater extends Repeater
{
    protected string $view = 'filament.components.confirmable-repeater';
}

2. 创建视图文件resources/views/filament/components/confirmable-repeater.blade.php，复制Filament v2原生Repeater的视图代码，找到删除按钮部分，修改点击事件：
   原删除按钮代码大概为：

<button type="button" wire:click="deleteItem({{ $statePath }})" class="filament-repeater-delete-button">
    <!-- 图标内容 -->
</button>

修改为：

<button type="button" onclick="confirmDelete('{{ $statePath }}')" class="filament-repeater-delete-button">
    <!-- 图标内容 -->
</button>

3. 添加对应的JS函数：

function confirmDelete(statePath) {
    const modal = new FilamentModal({
        title: '确认删除',
        description: '确定要删除该条目吗？',
        actions: [
            {
                label: '取消',
                method: 'close',
            },
            {
                label: '删除',
                method: function() {
                    @this.call('deleteItem', statePath);
                    modal.close();
                },
                danger: true,
            },
        ],
    });

    modal.open();
}

4. 在表单中使用自定义组件替代原生Repeater：

use App\Filament\Components\ConfirmableRepeater;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            ConfirmableRepeater::make('items')
                ->schema([
                    // 你的字段定义
                ]),
        ]);
}

注意事项 #

• 方法一快速生效，无需修改组件结构，但依赖按钮类名的稳定性；
• 方法二更灵活，适合自定义确认文案或扩展逻辑的场景；
• 两种方法均使用Filament内置模态框，保持UI风格统一。

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