Formulaires dynamiques : lignes, validation, OTP (JS vs TS)

Une liste de lignes éditables : chaque ligne a ses champs, on ajoute ou supprime en entier.

Sans TS, chaque ligne est un objet muet : un champ manquant passe inaperçu.
Avec lang="ts", une interface Ligne (intitule, prix) cadre chaque rangée.
On remplace le tableau, on ne le mute jamais : rendu vivant et prévisible.

src/lib/Lignes.sveltesvelte

<script>
  let lignes = $state([{ intitule: '', prix: 0 }])

  function ajouter() {
    lignes = [...lignes, { intitule: '', prix: 0 }]
  }

  function retirer(i) {
    lignes = lignes.filter((l, j) => j !== i)
  }
</script>

{#each lignes as ligne, i (i)}
  <div class='ligne'>
    <input bind:value={ligne.intitule} placeholder='Intitulé' />
    <input type='number' bind:value={ligne.prix} />
    <button onclick={() => retirer(i)}>✕</button>
  </div>
{/each}
<button onclick={ajouter}>Ajouter une ligne</button>