Gestion des formulaires

Cette page concerne le composant Vue FormLayout du paquet @framework/ui. Elle ne concerne pas les formulaires classiques du bureau (frappe.ui.form), qui gardent leurs événements habituels.

FormLayout sépare deux choses :

• la valeur en cours de saisie : chaque champ écrit sa valeur dans le document à chaque frappe (v-model:doc) ;
• la validation d'un champ (commit) : à la sortie d'un champ texte, ou au choix dans une liste. C'est ce moment qui déclenche vos traitements.

Fournir le canal de validation

Le composant parent du formulaire fournit un objet CommitChannel avec la clé CommitKey :

interface CommitChannel {
  pending(fieldname: string, value: any, row?: RowAddress): void;
  commit(fieldname: string, value: any, row?: RowAddress): void;
  rowChanged(row: RowAddress, change: "add" | "remove"): void;
}

Pour un champ d'une ligne de table, row donne l'adresse de la ligne : parentfield (le champ table) et key. key vaut name:<name> pour une ligne enregistrée. Tant que la ligne n'est pas enregistrée, key vaut new:<__row_id>, avec son identifiant temporaire.

Sans fournisseur de CommitKey, le formulaire ignore toutes les validations. En mode développement, il affiche une erreur dans la console. Pour un formulaire sans traitement (boîte de création, démonstration), fournissez NO_COMMIT.

Exemple

Exemple fictif : une page Vue recalcule le total d'une commande quand une quantité est validée.

<script setup lang="ts">
import { provide, ref } from "vue";
import { FormLayout, CommitKey } from "@framework/ui/FormLayout";

const doc = ref({ items: [] });

provide(CommitKey, {
  pending() {},
  commit(fieldname, value, row) {
    if (row?.parentfield === "items" && fieldname === "qty") {
      recalculerTotal(doc.value); // fonction de votre application
    }
  },
  rowChanged(row, change) {
    if (row.parentfield === "items") recalculerTotal(doc.value);
  },
});
</script>

<template>
  <FormLayout v-model:doc="doc" :layout="layout" />
</template>

Événements d'un champ

Un nœud du schéma peut aussi porter des écouteurs dans ui.on : { ui: { on: { change: (value) => … } } }. Le champ émet change à sa validation. Dans une cellule de table, la ligne est passée en dernier argument.

Pour masquer ou renommer un onglet, voir Personnalisation des onglets dans les formulaires.