Disable submit button Livewire Validation

I tried this and it works but, it shows all the error messages of the fields once I do the first one, not good

public function updated($propertyName)
    {
        $this->disabled = true;
        $this->validateOnly($propertyName);
	//checking to show the submit button
        $validated = $this->validate(); //shows all errors
        $this->disabled = false;
    }

Hi cristache, Sorry I just saw your question, I did kind of find a way, I will search for it and post it... but is not the cleanest way

Hello, this is my solution, no need of calling $this->validate(); inside updated.

public $name;
public $email;

// Array to save the valid state of all the inputs to validate. False by default.
public $valid = ["name" => false, "email" => false];

// Used to enable/disable the submit button
public $can_submit = false;

protected $rules = [
    'name' => 'required|string|max:255',
    'email' => 'required|email|max:255',
];

public function updated($propertyName)
{
    //can_submit is false if validation fails 
    $this->can_submit = false;

    $this->valid[$propertyName] = false;
    $this->validateOnly($propertyName);

    //This input is valid
    $this->valid[$propertyName] = true;

    //We can submit if all inputs are valid
    $this->can_submit = true;
    foreach($this->valid as $property) {
        if(!$property) {
            $this->can_submit = false;
            break;
        }
    }
}

In view:

<button type="submit" class="btn btn-success float-right" {{ $can_submit ? '' : 'disabled' }}>
        <i wire:loading wire:target='submitForm' class="fas fa-spin fa-spinner mr-2"></i> Envoyer
</button>

Found an elegant way of doing it without displaying every error that $this->validate() triggers:

(I'm using constants from a ButtonState class, DISABLED = 0, ENABLED = 1, LOADING = 2, ymmv)

public int $buttonState;

public function mount(Property $property): void
{
    $this->buttonState = ButtonState::STATE_DISABLED;
}

public function updated($propertyName)
{
    $this->validateOnly($propertyName);
    try {
        // Validate in a try/catch block to intercept the validation error.
        $this->validate();
        // If no exception was thrown, the form is valid, so we enable the button.
        $this->buttonState = ButtonState::STATE_ENABLED;
    } catch (ValidationException $e) {
        // If the global validation failed, keep the button disabled.
        $this->buttonState = ButtonState::STATE_DISABLED;
    }
}

public function submit(): void
{
    $data = $this->validate();
    $this->buttonState = ButtonState::STATE_LOADING;
    // Submit the form, then you probably want to enable it again.
    $this->buttonState = ButtonState::STATE_ENABLED;
}

Then in your Blade template:

<button
    type="submit"
    class="btn {{ $buttonState === \App\Constants\ButtonState::STATE_LOADING ?  'is-loading'  :  ''  }}
    {{ $buttonState === \App\Constants\ButtonState::STATE_DISABLED ? 'disabled' : '' }}
>
    {{ __('Submit') }}
</button>

My solution is:

Action::make('save')
    ...
    ->disabled(function () {
        try {
            $this->validate();

            return false;
        } catch (\Throwable) {
            return true;
        }
    }),