Список ошибок в Inertia

Давайте посмотрим на форму, где пусты сразу заголовок и длинный текст. Подпись под одним полем говорит только о нём. Про второе поле человек так и не узнает, хотя форма снова перед ним.

У слота есть hasErrors, а в errors лежат сообщения всех полей. Их удобно вывести одним списком над полями, чтобы сразу было видно весь объём правок.

Давайте опишем проверку заголовка и текста записи:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		$request->validate([
			'title' => 'required|string',
			'body' => 'required|string',
		]);

		return back();
	});
?>

Давайте выведем список сообщений и поля формы:

<script setup>
	import { Form } from '@inertiajs/vue3'
</script>

<template>
	<Form
		action="/posts"
		method="post"
		#default="{ errors, hasErrors }"
	>
		<ul v-if="hasErrors">
			<li
				v-for="(message, field) in errors"
				:key="field"
			>
				{{ message }}
			</li>
		</ul>
		<input type="text" name="title" />
		<textarea name="body"></textarea>
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте форму работника так, чтобы при пустых имени и должности над формой был виден список сообщений сервера.