如何在Filament中保存自定义模态框输入的数据？

1. 捕获用户输入的数据 #

有两种高效实现方式：

方式一：使用Filament Action内置表单（推荐） #

无需自定义Blade视图，直接在Action中定义字段，Filament会自动渲染表单并捕获输入数据：

Tables\Columns\TextColumn::make('relation_order_id')
    ->label('Related Record No')
    ->sortable()
    ->searchable()
    ->action(
        Action::make('customModal')
            ->label('Custom Modal')
            ->modalHeading('Custom Modal Heading')
            // 定义表单字段
            ->form([
                TextInput::make('custom_field')
                    ->label('Custom Field')
                    ->required()
                    ->rules(['string', 'max:255']),
                // 可添加更多字段，如Select、Textarea等
            ])
            ->modalWidth('lg')
            // 后续在action闭包中接收数据
            ->action(function (array $data, $record) {
                // 处理逻辑
            })
    )
    ->color('primary')
    ->toggleable();

这种方式下，用户输入的所有数据会自动封装到$data数组中，无需手动处理表单提交。

方式二：自定义Blade视图+Livewire #

如果需要高度定制UI，可结合Livewire实现数据捕获：
在Blade视图中绑定Livewire属性与提交事件：

<div>
    <form wire:submit.prevent="save">
        <div>
            <label for="custom_field">Custom Field</label>
            <input type="text" id="custom_field" class="form-control" wire:model="customField">
            <!-- 显示验证错误 -->
            @error('customField') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

2. 使用Action保存表单数据 #

内置表单的保存逻辑 #

延续方式一的代码，在Action的action()闭包中处理数据持久化：

->action(function (array $data, $record) {
    // 示例1：更新当前关联记录
    $record->update([
        'custom_field' => $data['custom_field'],
    ]);

    // 示例2：创建新关联记录
    // \App\Models\YourRelatedModel::create([
    //     'relation_order_id' => $record->id,
    //     'custom_field' => $data['custom_field'],
    // ]);

    // 发送成功通知
    \Filament\Notifications\Notification::make()
        ->title('数据保存成功')
        ->success()
        ->send();
})

表单字段的验证规则可直接在form()中定义，Filament会自动处理错误提示。

自定义Blade+Livewire的保存逻辑 #

创建Livewire组件处理保存：

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\YourModel; // 替换为你的业务模型
use Filament\Notifications\Notification;

class CustomModalForm extends Component
{
    public $record;
    public $customField;

    public function mount($record)
    {
        $this->record = $record;
        // 若为编辑场景，可初始化字段值
        // $this->customField = $record->custom_field;
    }

    protected $rules = [
        'customField' => 'required|string|max:255',
    ];

    public function save()
    {
        $this->validate();

        // 执行保存逻辑
        $this->record->update([
            'custom_field' => $this->customField,
        ]);

        Notification::make()
            ->title('保存成功')
            ->success()
            ->send();

        // 触发Filament模态框关闭事件
        $this->dispatch('closeModal');
    }

    public function render()
    {
        return view('filament.modals.custom_modal');
    }
}

然后在Action中引入该组件的视图即可：

->modalContent(function ($record) {
    return view('filament.modals.custom_modal', ['record' => $record]);
})

3. Livewire的适用性与推荐方案 #

完全可以用Livewire处理自定义模态框的表单逻辑，尤其适合需要复杂交互的场景。

最推荐的方案是使用Filament Action内置的表单：它与Filament生态深度集成，自带样式统一、验证、错误提示等功能，无需重复造轮子。只有当你需要高度定制UI或特殊交互时，再考虑使用Livewire组件。

此外，也可以用AJAX提交表单，但需要手动处理CSRF令牌、错误反馈等，效率低于前两种方式，不推荐作为首选。

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