Outside Filament - input value is null when the form is submitted

[hanifw]

I tried using this for outside filament (livewire), displaying the input with country selection, and most of the options, etc work well.

However, when the form is submitted, the input value is null and does not pass laravel required validation.

[ysfkaya]

I tested it and it works well. I'm not sure I understand you.

I used the following case;

<?php

namespace App\Livewire;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;
use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;

class Test extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount()
    {
        // You need to fill the form in mount method.
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form->schema([
            PhoneInput::make('phone')->required()
        ])->statePath('data');
    }

    public function create()
    {
        $state = $this->form->getState();

        dd($state);
    }

    public function render()
    {
        return view('livewire.test');
    }
}

The required validation is not passing if value is not set. Also the input value is not getting null anytime. Try this way.

[hanifw]

I tried the same but got this, not sure what went wrong.

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;
use Filament\Forms\Form;
use Filament\Actions\Action;
use Illuminate\Support\Facades\URL;
use Filament\Forms\Components\Select;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Auth\Events\Registered;
use Filament\Forms\Components\TextInput;
use App\Services\ServiceOnboardingDetail;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Actions\Concerns\InteractsWithActions;
use Ysfkaya\FilamentPhoneInput\Forms\PhoneInput;
use Rawilk\FilamentPasswordInput\Password;

class OnboardingUser extends Component implements HasForms, HasActions
{
    use InteractsWithForms;
    use InteractsWithActions;

    public ?array $data = [];

    public function mount()
    {
        // You need to fill the form in mount method.
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->label('Full name')
                    ->placeholder('Your full name')
                    ->rules('required'),
                TextInput::make('email')
                    ->placeholder('yourname@yourcompany.com')
                    ->email()
                    ->rules(['email', 'required', 'unique:users,email']),
                PhoneInput::make('phone')->label('Mobile number')
                    ->rules('required'),
                Password::make('password')
                    ->label('Password')
                    ->inlineSuffix()
                    ->copyable()
                    ->rules('required','min:8'),                
            ])->statePath('data');
    }

    // public function submitAction(): Action
    // {
    //     return Action::make('Next Step')
    //         ->submit('create');
    // }

    public function create()
    {
        $state = $this->form->getState();

        dd($state);
        exit;

        $personalForm = $this->form->getState();

        $user = ServiceOnboardingDetail::createUser($personalForm);
        if ($user) {
            event(new Registered($user));
            return redirect()->route('verification.send.user.get', ['user' => $user]);
        } else {
            // Reinitialize the form to clear its data.
            $this->form->fill();
            return redirect()->back()->withInput()->withErrors(['message' => 'User creation failed']);
        }
    }

    public function render()
    {
        return view('livewire.onboarding.onboarding-user');
    }
}

[ysfkaya]

Your phone number is not valid. You can check here

https://intl-tel-input.com/examples/validation.html

If I remember correctly, the value does not affect to the state of component if it is not a valid phone number. Have you tried another number?

[hanifw]

It's a valid number because it is my phone number.

[ysfkaya]

I just realized it's the Malaysian flag, my bad. But it still seems to work when I test it. I don't think the problem is caused by the plugin.

[hanifw]

Have you tried on the latest filament v3?

[ysfkaya]

Have you tried on the latest filament v3?

Yes, I am even using it without any problems in a new client project outside of filament.

[ysfkaya]

I am closing this issue as there is no more reaction. If you have any questions, you can post them in the discussion section.

[sezohessen]

I am getting the same validation error even if the phone number is valid

                        PhoneInput::make('mobile')
                            ->label('Phone')
                            ->required(),

[ysfkaya]

I am getting the same validation error even if the phone number is valid

                        PhoneInput::make('mobile')
                            ->label('Phone')
                            ->required(),

Did you fill the form in the mount method?

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

[sezohessen]

Thank you , Solved