Integrando Un Formulario En Un Componente Livewire

🔧 Paso 1: Implementar la Interfaz y el Trait

Para comenzar, tu componente Livewire debe implementar la interfaz HasForms y usar el trait InteractsWithForms. Esto proporciona toda la magia de Filament para manejar formularios.

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;

class MiComponente extends Component implements HasForms
{
    use InteractsWithForms;
}

📦 Paso 2: Definir una Propiedad Pública para los Datos

Necesitamos un lugar donde almacenar los datos del formulario. Define una propiedad pública (por ejemplo, $data) que Livewire pueda observar y actualizar automáticamente.

public array $data = [];

💡 Tip: Usa un array para estructurar los datos del formulario de manera organizada.

🛠 Paso 3: Configurar el Formulario con el Método `form()`

El corazón del formulario reside en el método form(). Aquí defines los campos (schema) y especificas dónde se guardarán los datos (en este caso, en $data usando statePath('data')).

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('nombre')
                ->required(),
            // ¡Más campos aquí!
        ])
        ->statePath('data'); // Vincula los datos a $this->data
}

🏁 Paso 4: Inicializar el Formulario en `mount()`

¡No olvides inicializar el formulario! Esto es crucial incluso si no hay datos iniciales. Usa $this->form->fill() para preparar el formulario.

public function mount(): void
{
    $this->form->fill(); // Inicializa el formulario
}

⚠️ Importante: Sin este paso, el formulario no funcionará correctamente.

📤 Paso 5: Manejar el Envío del Formulario

Finalmente, define un método para procesar el envío. Usa $this->form->getState() para obtener los datos validados y transformados (¡nunca accedas directamente a $this->data!).

public function create(): void
{
		dd($this->form->getState());
}

🎯 Conclusión

Integrar un formulario en Livewire con Filament es sencillo si sigues estos pasos:

Implementar HasForms + InteractsWithForms.
Definir $data (u otra propiedad).
Configurar el schema en form().
Inicializar con fill() en mount().
Procesar el envío con getState().

¡Y listo! 🎉 Ahora tienes un formulario totalmente funcional y reactivo.

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios! 👇

#PHP #Livewire #Filament #WebDev

Integrando un Formulario en un Componente Livewire