@svelte-lean/query/forms

import { fieldErrors, issues, errorKey } from '@svelte-lean/query/forms';

<script lang="ts">
	import { createMutation } from '@svelte-lean/query';
	import { fieldErrors, issues } from '@svelte-lean/query/forms';
	import { createMember } from '$api/members';

	const save = createMutation(createMember);

	function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
		event.preventDefault();
		const data = new FormData(event.currentTarget);
		save.run({
			name: String(data.get('name')),
			email: String(data.get('email')),
			team: 'Design',
			role: 'member'
		});
	}
</script>

<!-- The server's 422 marks the fields: aria-invalid, aria-describedby, custom validity, focus. -->
<form {@attach fieldErrors(() => save.error)} onsubmit={submit}>
	<label>Name <input name="name" required /></label>
	{#each issues(save.error, 'name') as message (message)}<p>{message}</p>{/each}
	<label>Email <input name="email" type="email" required /></label>
	{#each issues(save.error, 'email') as message (message)}<p>{message}</p>{/each}
	<button disabled={save.busy}>Invite</button>
</form>