Filament Facile

📌 Introduction

Dans ce tutoriel, nous allons voir comment activer ou désactiver dynamiquement des champs en fonction d'une case à cocher dans Filament PHP.

Nous allons créer un formulaire contenant :

Des informations personnelles (Nom, Email).
Des informations professionnelles, qui ne s'affichent que si l'utilisateur coche "Je suis un professionnel".

Cela est rendu possible grâce à live(), qui met à jour l'interface en temps réel sans recharger la page.

🚀 Explication du Code

Voici le code complet du formulaire :

<?php
namespace App\Filament\Pages;

use Filament\Actions\Action;
use Filament\Pages\Page;
use Filament\Forms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;

class Tuto1 extends Page implements Forms\Contracts\HasForms
{
    use Forms\Concerns\InteractsWithForms;
    
    protected static ?string $navigationIcon = 'heroicon-o-document-text';
    protected static string $view = 'filament.pages.tuto1';

    public $nom;
    public $email;
    public $is_professional;
    public $company_name;
    public $company_vat;
    public $company_address;

    protected function getFormSchema(): array
    {
        return [
            Forms\Components\Section::make('Informations personnelles')
                                    ->columnSpan(1)
                                    ->schema([
                                        Forms\Components\TextInput::make('nom')
                                                                  ->label('Nom')
                                                                  ->required(),
                                        Forms\Components\TextInput::make('email')
                                                                  ->label('Email')
                                                                  ->email()
                                                                  ->required(),
                                    ]),
            Forms\Components\Section::make('Informations professionnelles')
                                    ->columnSpan(1)
                                    ->schema([
                                        Forms\Components\Checkbox::make('is_professional')
                                                                 ->live() // Permet la mise à jour en direct
                                                                 ->label('Je suis un professionnel'),
                                        Forms\Components\Group::make([
                                            Forms\Components\TextInput::make('company_name')
                                                                      ->label("Nom de l'entreprise"),
                                            Forms\Components\TextInput::make('company_vat')
                                                                      ->label('Numéro de TVA'),
                                            Forms\Components\TextInput::make('company_address')
                                                                      ->label("Adresse de l'entreprise"),
                                        ])->disabled(fn (Forms\Get $get) => !$get('is_professional')) // Désactive les champs si la case n'est pas cochée
                                    ])
        ];
    }

    protected function getFormActions(): array
    {
        return [
            Action::make('save')
                  ->label('Sauvegarder')
                  ->action('submit')
                  ->color('primary')
                  ->requiresConfirmation()
        ];
    }

    public function submit()
    {
        dd($this->form->getState()); // Affiche les données soumises
    }
}

🔥 Explication de `live()` et `disabled()`

1. La case à cocher "Je suis un professionnel"

Forms\Components\Checkbox::make('is_professional')
                         ->live()
                         ->label('Je suis un professionnel'),

Le live() permet de mettre à jour les champs en temps réel.
Chaque fois que l’utilisateur coche ou décoche la case, l’état du formulaire est mis à jour immédiatement.

2. Désactivation des champs professionnels

Forms\Components\Group::make([
    Forms\Components\TextInput::make('company_name')->label("Nom de l'entreprise"),
    Forms\Components\TextInput::make('company_vat')->label('Numéro de TVA'),
    Forms\Components\TextInput::make('company_address')->label("Adresse de l'entreprise"),
])->disabled(fn (Forms\Get $get) => !$get('is_professional'))

disabled() reçoit une condition en fonction de l’état de la case à cocher.
Si is_professional est false, les champs seront grisés et non modifiables.
Dès que l'utilisateur coche la case, les champs deviennent actifs.

✅ Résultat

Au chargement, la case "Je suis un professionnel" est décochée et les champs professionnels sont désactivés.
Lorsqu'on coche la case, les champs professionnels deviennent actifs instantanément.
Lorsqu'on décoche, les champs se grisent à nouveau.

🎯 Conclusion

Grâce à live(), on peut rendre les formulaires interactifs sans rechargement de page. C'est une solution idéale pour améliorer l'expérience utilisateur sur Filament PHP.

Désactivation dynamique des champs de formulaire