Laravel Filament动态字段问题：TextInput始终为空

问题根源 #

两个组件共享同一个link字段名，即便通过when()隐藏，Filament的表单状态管理中，FileUpload组件仍可能在初始化或状态同步时修改link的状态值（比如将字符串链接转为Media对象或清空），导致切换到link类型时TextInput无法获取原始值。

方案1：给FileUpload添加状态隔离配置 #

修改FileUpload的when()逻辑，明确在非image类型时隐藏组件并禁止其参与表单状态的脱水/ hydration，避免干扰TextInput的状态：

FileUpload::make('link')
    ->reactive()
    ->image()
    ->disk('s3')
    ->directory(function (RelationManager $livewire): string {
        return ProductMediaService::getUploadDirectory($livewire->ownerRecord);
    })
    ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file, RelationManager $livewire): string {
        return ProductMediaService::getFileName($livewire->ownerRecord, $file->getClientOriginalExtension());
    })
    ->when(fn (Closure $get) => $get('type') === 'image',
        fn ($component) => $component,
        fn ($component) => $component->hidden()->dehydrated(false)
    ),

方案2：使用临时状态键，提交时合并字段 #

给两个组件分配不同的临时字段名，在表单提交时根据type的值将对应状态合并到link字段：

// 表单组件部分
Select::make('type')
    ->options(['image' => 'image', 'link' => 'link'])
    ->default('image')
    ->required()
    ->reactive(),
FileUpload::make('image_link')
    ->reactive()
    ->image()
    ->disk('s3')
    ->directory(function (RelationManager $livewire): string {
        return ProductMediaService::getUploadDirectory($livewire->ownerRecord);
    })
    ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file, RelationManager $livewire): string {
        return ProductMediaService::getFileName($livewire->ownerRecord, $file->getClientOriginalExtension());
    })
    ->when(fn (Closure $get) => $get('type') === 'image'),
TextInput::make('text_link')
    ->reactive()
    ->when(fn (Closure $get) => $get('type') === 'link'),
// 其他组件...

// 添加表单数据处理逻辑
->mutateFormDataBeforeSave(function (array $data): array {
    if ($data['type'] === 'image') {
        $data['link'] = $data['image_link'];
        unset($data['image_link']);
    } else {
        $data['link'] = $data['text_link'];
        unset($data['text_link']);
    }
    return $data;
})

方案3：用DynamicComponent实现组件动态切换 #

使用Filament的DynamicComponent，根据type的值渲染对应的组件，确保同一时间只有一个组件绑定到link字段，彻底避免状态冲突：

return $form
    ->schema([
        Select::make('type')
            ->options(['image' => 'image', 'link' => 'link'])
            ->default('image')
            ->required()
            ->reactive(),
        DynamicComponent::make(fn (Closure $get) => match ($get('type')) {
            'image' => FileUpload::class,
            'link' => TextInput::class,
        })
        ->name('link')
        ->configure(function (Component $component, Closure $get) {
            if ($component instanceof FileUpload) {
                $component
                    ->reactive()
                    ->image()
                    ->disk('s3')
                    ->directory(function (RelationManager $livewire): string {
                        return ProductMediaService::getUploadDirectory($livewire->ownerRecord);
                    })
                    ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file, RelationManager $livewire): string {
                        return ProductMediaService::getFileName($livewire->ownerRecord, $file->getClientOriginalExtension());
                    });
            } elseif ($component instanceof TextInput) {
                $component->reactive();
            }
        }),
        // 其他组件...
    ]);

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