<script>
import { Data } from './data.svelte.js';
let data = $state(new Data());
function add() {
alert(`登録! ${data.name}、${data.age}`);
data = new Data();
}
</script>
<div>
<label>
<span>名前</span>
<input bind:value={data.name} />
<span class="error">{data.errors.name}</span>
</label>
</div>
<div>
<label>
<span>年齢</span>
<input bind:value={data.age} />
<span class="error">{data.errors.age}</span>
</label>
</div>
<button disabled={!data.isValid()} onclick={add}>登録</button>
<style>
div {
margin-bottom: .5rem;
}
.error {
color: red;
display:block;
height: 1.5rem;
margin-left: 2.5rem;
}
</style>