Utilisation avancée des grilles et formulaires

Cette page concerne les formulaires Vue construits avec FormLayout. Elle explique comment votre application reçoit les modifications de l'utilisateur.

Valeur en direct et validation

Un champ transmet sa valeur de deux façons :

FormLayout n'émet pas les validations lui-même. Elles passent par un canal que votre application fournit avec la clé CommitKey.

Fournir le canal de validation

import { provide } from "vue";
import { CommitKey } from "@framework/ui/FormLayout";

provide(CommitKey, {
    pending(fieldname, value, row) {
        // saisie en cours, pas encore validée : à valider avant l'enregistrement
    },
    commit(fieldname, value, row) {
        if (row) {
            console.log(`Ligne ${row.key} du tableau ${row.parentfield} : ${fieldname} = ${value}`);
        } else {
            console.log(`${fieldname} = ${value}`);
        }
    },
    rowChanged(row, change) {
        // change vaut "add" ou "remove"
    },
});

Appelez provide dans le composant qui contient FormLayout. Le canal a trois méthodes :

Un nœud du schéma peut aussi porter ses propres écouteurs dans ui.on, par exemple { ui: { on: { change: (value) => … } } }. Le champ émet change à sa validation. Voir FormLayout.

Pour une cellule de tableau, row vaut { parentfield, key } : le nom du champ Table et la clé de la ligne. Un champ Table ne valide jamais sous son propre nom : chaque cellule valide sous le nom de sa colonne. Il en va de même dans la boîte de dialogue d'édition d'une ligne.

Pour un formulaire sans script (boîte de création, démonstration), fournissez NO_COMMIT :

import { CommitKey, NO_COMMIT } from "@framework/ui/FormLayout";
provide(CommitKey, NO_COMMIT);

Sans canal, les validations sont perdues. En développement, une erreur s'affiche dans la console.

Identifier une ligne de tableau

Le composant n'invente pas de name pour une nouvelle ligne. frappe.client.save traite une ligne qui a un name comme une ligne existante : l'insertion échouerait sans erreur.

Les deux types de clé sont séparés (name: et new:). Une ligne nommée row-3 par le serveur ne peut donc pas se confondre avec une nouvelle ligne.