Désactivation dynamique des champs de formulaire

📌 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.