FilamentPHP：如何在向导表单提交前调用内置确认模态框？

要替换原生浏览器弹窗为Filament内置的确认模态框，你需要正确配置Action实例并绑定表单提交逻辑——之前的代码仅启用了确认要求但未关联执行动作，所以点击无反应。以下是具体实现方案：

正确的SubmitAction配置 #

替换你原来的submitAction代码块，使用Filament的Action类绑定表单的create处理方法，同时可自定义确认模态框的内容：

use Filament\Actions\Action;

// ... 其他代码保持不变

Wizard::make([
    // ... 你的步骤定义
])
->skippable(false)
->columnSpanFull()
->submitAction(
    Action::make('confirm')
        ->label('Confirm')
        ->requiresConfirmation()
        ->confirmationTitle('确认提现')
        ->confirmationDescription('你确定要创建这笔提现交易吗？')
        ->confirmationButtonLabel('确认创建')
        ->cancelButtonLabel('取消')
        ->action(function (array $data) {
            // 调用组件中的create逻辑处理表单数据
            $this->create($data);
        })
)

关键说明 #

• requiresConfirmation()：启用Filament内置的确认模态框，这是核心配置。
• action()方法：必须绑定处理逻辑，这里直接调用组件中的create方法（和你原来wire:click="create"的逻辑一致），确保表单数据能正确写入数据库。
• 自定义确认内容：通过confirmationTitle、confirmationDescription等方法可以让模态框更贴合业务场景，提升用户体验。

确保组件存在create方法 #

你的Livewire组件（比如CreateWithdrawal）中需要保留create方法，负责处理表单数据的持久化：

public function create(array $data)
{
    // 写入数据库的逻辑示例：
    Withdrawal::create([
        'amount' => $data['amount'],
        'store_id' => $data['store_id'],
        // 其他业务字段...
    ]);

    // 成功后的跳转或提示
    $this->redirectRoute('withdrawals.index');
}

替换后的完整表单代码片段 #

整合后，你的form方法中Wizard部分会是这样：

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Wizard::make([
                Wizard\Step::make('Withdrawal')
                    ->icon('heroicon-o-currency-dollar')
                    ->completedIcon('heroicon-s-currency-dollar')
                    ->description('Transaction details')
                    ->columns(2)
                    ->schema([
                        Forms\Components\TextInput::make('amount')
                            ->required()
                            ->numeric()
                            ->minValue(1)
                            ->mask(RawJs::make('$money($input)'))
                            ->stripCharacters(',')
                            ->prefix('KM'),
                        Forms\Components\Select::make('store_id')
                            ->label('Office')
                            ->searchable()
                            ->required()
                            ->options(Auth::user()->currentCompany->stores()->where('status', true)->pluck('name', 'id')),
                    ])->afterValidation(function (Forms\Get $get, Forms\Set $set) {
                        $currency = Currency::where('code', 'BAM')->first();
                        $store = Store::find($get('store_id'));

                        $set('store_name', $store->name);
                        $set('withdrawal_currency', $currency->code);
                        $set('withdrawal_amount', $get('amount'));

                        $formatter = new \NumberFormatter('en', \NumberFormatter::SPELLOUT);
                        $set('withdrawal_amount_text', $formatter->format(str_replace(',', '', $get('amount'))));
                    }),

                Wizard\Step::make('Overview')
                    ->icon('heroicon-o-check-circle')
                    ->completedIcon('heroicon-c-check-circle')
                    ->description('Confirm transaction')
                    ->schema([
                        Forms\Components\Fieldset::make('Deposit')
                            ->columns(3)
                            ->schema([
                                Placeholder::make('review_store_name')
                                    ->label('Office')
                                    ->content(fn(Get $get): string => $get('store_name') ?? ''),
                                Placeholder::make('review_withdrawal_amount')
                                    ->label('Amount')
                                    ->content(fn(Get $get): string => $get('withdrawal_amount') ?? ''),
                                Placeholder::make('review_withdrawal_currency')
                                    ->label('Currency')
                                    ->content(fn(Get $get): string => $get('withdrawal_currency') ?? ''),
                                Placeholder::make('review_withdrawal_amount_text')
                                    ->label('Text amount')
                                    ->content(fn(Get $get): string => $get('withdrawal_amount_text') ?? ''),
                            ])->columns(2),
                    ]),
            ])
                ->skippable(false)
                ->columnSpanFull()
                ->submitAction(
                    Action::make('confirm')
                        ->label('Confirm')
                        ->requiresConfirmation()
                        ->confirmationTitle('确认提现')
                        ->confirmationDescription('你确定要创建这笔提现交易吗？')
                        ->confirmationButtonLabel('确认创建')
                        ->cancelButtonLabel('取消')
                        ->action(function (array $data) {
                            $this->create($data);
                        })
                )
        ]);
}

这样配置后，点击确认按钮会弹出Filament风格的模态框，确认后执行create方法写入数据库。

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