每当表单字段为空时如何禁用提交按钮？

Question

我有一个登录表单，其中包含一些输入字段，例如“电子邮件”和“密码”。此表单由 Laravel 和 Livewire 实时验证创建。到现在为止，一切都很好。

使用 livewire 规则，如果 Alpine.js 的表单字段为空或为空，我想禁用提交按钮。我该怎么做？

app\Http\Livewire\LoginForm

class LoginForm extends Component
{
    public $email = '';
    public $password = '';

    protected $rules = [
        'email' => 'required|email',
        'password' => 'required|min:12',
    ];

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function saveUser()
    {
        $validatedData = $this->validate();

        User::create($validatedData);
    }
}

LoginForm Component

<form wire:submit.prevent="saveUser">
    <input type="email" wire:model="email" class="form-control">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <input type="password" wire:model="password" class="form-control">
    @error('password') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Login Now</button>
</form>

Answer 1

如何简单地使用刀片检查值本身

<button type="submit" {{ (!is_null($email) && !empty($email) && !is_null($password) && !empty($password)) ? '' : 'disabled' }}>Login Now</button>

Answer 2

在您的组件中，您可以使用单独的属性 public bool $canBeSubmitted 来保存按钮的启用/禁用状态。

class LoginForm extends Component
{
    public $email = '';
    public $password = '';

    /**
     * Toggle disabled state of submit button
     */
    public bool $canBeSubmitted = false;

    protected $rules = [
        'email' => 'required|email',
        'password' => 'required|min:12',
    ];

    public function updated($email)
    {
        $this->validateOnly($propertyName);

        // Setting $canBeSubmitted to true/false 
    }

    public function saveUser()
    {
        $validatedData = $this->validate();

        User::create($validatedData);
    }
}

<form wire:submit.prevent="saveUser">
    <!-- inputs -->

    <button type="submit" {{ !empty($canBeSubmitted)) ? '' : 'disabled' }}>Login Now</button>
</form>

AlpineJS 和 Livewire

要从 AlpineJS 和 Livewire 访问 canBeSubmitted 属性，您可以使用 entangled feature。

来自文档：

Livewire 有一个非常强大的功能，称为“纠缠”，它允许您将 Livewire 和 Alpine 属性“纠缠”在一起。使用纠缠，当一个值发生变化时，另一个值也会发生变化。