Laravel Livewire 错误未清除答案

【问题标题】：Laravel Livewire errors are not clearedLaravel Livewire 错误未清除
【发布时间】：2020-07-03 01:47:43
【问题描述】：

我正在尝试使用 Laravel Livewire，我遇到了一种情况，即使表单提交成功，也会显示以前的错误。

点击保存之前

点击保存后

刀片文件customer-new.blade.php中name的HTML片段。

<div class="form-group">
    <div class="border rounded-0 px-1">
        <label class="mb-0" for="name">Name</label>
        <input wire:model="name" type="text" class="form-control form-control-sm " id="customer-name" aria-describedby="customer-nameHelp">
    </div>
    @error('name') <span class="err-message">{{ $message }}</span> @enderror
</div>

以及保存按钮代码：

<button 
  wire:click="store" 
  wire:loading.attr="disabled" 
  wire:target="store" 
  type="submit" 
  class="btn btn-sm btn-light">Save
</button>

storeCustomerNew.php 方法：

public function store()
{
    $this->validate([
        'name' => 'required|max:80',
        'street' => 'required|max:100',
        'city' => 'required|max:40',
        'dueAmount' => 'numeric|min:0'
    ]);

    Customer::create([
        'name' => $this->name,
        'street' => $this->street,
        'city' => $this->city,
        'due_amount' => $this->dueAmount,
    ]);

    session()->flash('message', 'Customer was saved');

    $this->clear();
}

clear() 方法是这样的：

public function clear() {
  $this - > name = '';
  $this - > street = '';
  $this - > city = '';
  $this - > dueAmount = 0;
}

【问题讨论】：

您确定您没有发送两次表单吗？当已经通过按钮提交表单时使用<form wire:submit.prevent="store">，请确保不要使用提交按钮。

标签： laravel-validation laravel-livewire

【解决方案1】：

您应该使用 livewire 的 reset 方法重置公共属性。删除您的 $this->clear() 方法定义并将其替换为以下内容：

$this->reset('name', 'street', 'city', 'dueAmount');

【讨论】：

【解决方案2】：

根据文档https://laravel-livewire.com/docs/input-validation，

您需要随时重置验证

直接错误消息操作 validate() 和 validateOnly() 方法应该可以处理大多数情况，但有时您可能需要直接控制 Livewire 的内部 ErrorBag。

Livewire 提供了一些方法供您直接操作错误包。

从 Livewire 组件类中的任何位置，您都可以调用以下方法：
    $this->addError('email', 'The email field is invalid.');
    // Quickly add a validation message to the error bag.
    
    $this->resetErrorBag();
    $this->resetValidation();
    // These two methods do the same thing. The clear the error bag.
    // If you only want to clear errors for one key, you can use:
    $this->resetValidation('email');
    $this->resetErrorBag('email');
    
    $errors = $this->getErrorBag();
    // This will give you full access to the error bag,
    // allowing you to do things like this:
    $errors->add('some-key', 'Some message');

提示

我正在使用以下水合物功能的重置方法

...
    public function hydrate()
    {
        $this->resetErrorBag();
        $this->resetValidation();
    }
...

【讨论】：

我想调用$this->resetValidation() 就足够了，因为它在内部调用了resetErrorBag() 方法

【解决方案3】：

将 id 添加到错误消息 div

@error('name') <span class="err-message" id="name-error">{{ $message }}</span> @enderror

@error('street') <span class="err-message" id="street-error">{{ $message }}</span> @enderror

@error('city') <span class="err-message" id="city-error">{{ $message }}</span> @enderror

@error('due_amount') <span class="err-message" id="due_amount-error">{{ $message }}</span> @enderror

【讨论】：