Laravel Filament中如何基于CheckBoxList动态生成表单字段？

当然可以实现这种动态字段效果，核心是利用Filament的表单字段可见性控制结合Livewire的实时更新能力。下面是针对你提到的「勾选颜色选项后显示对应输入框」的具体实现方案：

1. 定义基础的CheckBoxList选项 #

首先在你的Resource表单中添加CheckBoxList组件，用来选择需要启用的字段类型（比如颜色、尺寸等），并绑定到一个模型属性（比如enabled_fields，建议存为JSON格式）。

use Filament\Forms\Components\CheckBoxList;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // 其他基础字段...
            
            CheckBoxList::make('enabled_fields')
                ->label('启用的字段')
                ->options([
                    'color' => '颜色',
                    'size' => '尺寸',
                    'weight' => '重量',
                ])
                ->live() // 开启实时更新，勾选后立即触发字段变化
                ->columns(1),
            
            // 动态字段部分
            TextInput::make('color_value')
                ->label('颜色值')
                ->visible(fn (callable $get) => in_array('color', $get('enabled_fields') ?? []))
                ->required(fn (callable $get) => in_array('color', $get('enabled_fields') ?? [])),
            
            TextInput::make('size_value')
                ->label('尺寸值')
                ->visible(fn (callable $get) => in_array('size', $get('enabled_fields') ?? []))
                ->required(fn (callable $get) => in_array('size', $get('enabled_fields') ?? [])),
            
            TextInput::make('weight_value')
                ->label('重量值')
                ->visible(fn (callable $get) => in_array('weight', $get('enabled_fields') ?? []))
                ->required(fn (callable $get) => in_array('weight', $get('enabled_fields') ?? [])),
        ]);
}

2. 模型层处理JSON字段 #

因为enabled_fields是多选属性，需要在模型中将其转为数组类型存储：

// 你的Product模型
protected $casts = [
    'enabled_fields' => 'array',
    'color_value' => 'string',
    'size_value' => 'string',
    'weight_value' => 'string',
];

同时记得在数据库迁移中添加对应的字段：

Schema::create('products', function (Blueprint $table) {
    // 其他字段...
    $table->json('enabled_fields')->nullable();
    $table->string('color_value')->nullable();
    $table->string('size_value')->nullable();
    $table->string('weight_value')->nullable();
});

3. 优化体验：联动清除无效数据 #

可以给CheckBoxList添加状态更新后的逻辑，当用户取消勾选时自动清空对应输入框的值，避免提交无效数据：

CheckBoxList::make('enabled_fields')
    // ...其他配置
    ->afterStateUpdated(function (callable $set, $state) {
        if (!in_array('color', $state)) {
            $set('color_value', null);
        }
        if (!in_array('size', $state)) {
            $set('size_value', null);
        }
        if (!in_array('weight', $state)) {
            $set('weight_value', null);
        }
    })

关键要点 #

• 必须给CheckBoxList加上->live()，确保勾选状态变化时实时触发表单更新
• 用visible()方法根据enabled_fields的状态动态控制字段显示/隐藏
• 用required()方法动态设置必填规则，只有勾选对应选项时才要求输入

内容的提问来源于stack exchange，提问作者Bashar El-Mouhammad