Сброс ошибок в Livewire

После неудачной отправки сообщения об ошибках остаются на странице. Поля при этом можно вернуть к пустому виду, но тексты никуда не деваются: они по-прежнему говорят о проблемах, которых в форме уже нет.

Сброса свойств для этого мало. Сообщения проверки хранятся отдельно от значений полей, и их снимают своим вызовом. Удобно сделать одно действие, которое очищает и поля, и эти тексты.

Давайте заведём метод clear и вызовем в нём оба сброса:

<?php
	namespace App\Livewire;
	
	use App\Models\Post;
	use Livewire\Component;
	
	class PostForm extends Component
	{
		public $title = '';
		public $body = '';
		
		public function clear()
		{
			$this->reset();
			$this->resetValidation();
		}
		
		public function save()
		{
			$this->validate([
				'title' => 'required|min:3',
				'body' => 'required',
			], [
				'title.required' => 'Enter a title',
				'body.required' => 'Enter a text',
			], [
				'title' => 'heading',
				'body' => 'text',
			]);
			
			Post::create([
				'title' => $this->title,
				'body' => $this->body,
			]);
			
			$this->reset();
		}
		
		public function render()
		{
			return view('livewire.post-form');
		}
	}
?>

Рядом с формой добавим кнопку, которая вызывает clear:

<div>
	@if ($errors->any())
		<ul>
			@foreach ($errors->all() as $error)
				<li>{{ $error }}</li>
			@endforeach
		</ul>
	@endif
	<form wire:submit="save">
		<input type="text" wire:model="title">
		@error('title')
			<div>{{ $message }}</div>
		@enderror
		<textarea wire:model="body"></textarea>
		@error('body')
			<div>{{ $message }}</div>
		@enderror
		<button type="submit">
			Save
		</button>
	</form>
	<button type="button" wire:click="clear">
		Clear
	</button>
</div>

После очистки формы работника уберите и тексты ошибок.