[{"data":1,"prerenderedAt":797},["ShallowReactive",2],{"\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fgestion-des-formulaires":3,"section:\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fgestion-des-formulaires":796},{"id":4,"title":5,"body":6,"description":783,"extension":784,"meta":785,"navigation":436,"path":792,"seo":793,"stem":794,"__hash__":795},"docs\u002F1.v5\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fgestion-des-formulaires.md","Gestion des formulaires",{"type":7,"value":8,"toc":778},"minimark",[9,13,30,35,57,62,73,240,296,323,333,337,340,747,751,766,774],[10,11,5],"h1",{"id":12},"gestion-des-formulaires",[14,15,16,17,21,22,25,26,29],"p",{},"Cette page concerne le composant Vue ",[18,19,20],"code",{},"FormLayout"," du paquet ",[18,23,24],{},"@framework\u002Fui",". Elle ne concerne pas les formulaires classiques du bureau (",[18,27,28],{},"frappe.ui.form","), qui gardent leurs événements habituels.",[14,31,32,34],{},[18,33,20],{}," sépare deux choses :",[36,37,38,51],"ul",{},[39,40,41,42,46,47,50],"li",{},"la ",[43,44,45],"strong",{},"valeur en cours de saisie"," : chaque champ écrit sa valeur dans le document à chaque frappe (",[18,48,49],{},"v-model:doc",") ;",[39,52,41,53,56],{},[43,54,55],{},"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.",[58,59,61],"h2",{"id":60},"fournir-le-canal-de-validation","Fournir le canal de validation",[14,63,64,65,68,69,72],{},"Le composant parent du formulaire fournit un objet ",[18,66,67],{},"CommitChannel"," avec la clé ",[18,70,71],{},"CommitKey"," :",[74,75,80],"pre",{"className":76,"code":77,"language":78,"meta":79,"style":79},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface CommitChannel {\n  pending(fieldname: string, value: any, row?: RowAddress): void;\n  commit(fieldname: string, value: any, row?: RowAddress): void;\n  rowChanged(row: RowAddress, change: \"add\" | \"remove\"): void;\n}\n","ts","",[18,81,82,99,150,186,234],{"__ignoreMap":79},[83,84,87,91,95],"span",{"class":85,"line":86},"line",1,[83,88,90],{"class":89},"spNyl","interface",[83,92,94],{"class":93},"sBMFI"," CommitChannel",[83,96,98],{"class":97},"sMK4o"," {\n",[83,100,102,106,109,113,116,119,122,125,127,130,132,135,138,141,144,147],{"class":85,"line":101},2,[83,103,105],{"class":104},"swJcz","  pending",[83,107,108],{"class":97},"(",[83,110,112],{"class":111},"sHdIc","fieldname",[83,114,115],{"class":97},":",[83,117,118],{"class":93}," string",[83,120,121],{"class":97},",",[83,123,124],{"class":111}," value",[83,126,115],{"class":97},[83,128,129],{"class":93}," any",[83,131,121],{"class":97},[83,133,134],{"class":111}," row",[83,136,137],{"class":97},"?:",[83,139,140],{"class":93}," RowAddress",[83,142,143],{"class":97},"):",[83,145,146],{"class":93}," void",[83,148,149],{"class":97},";\n",[83,151,153,156,158,160,162,164,166,168,170,172,174,176,178,180,182,184],{"class":85,"line":152},3,[83,154,155],{"class":104},"  commit",[83,157,108],{"class":97},[83,159,112],{"class":111},[83,161,115],{"class":97},[83,163,118],{"class":93},[83,165,121],{"class":97},[83,167,124],{"class":111},[83,169,115],{"class":97},[83,171,129],{"class":93},[83,173,121],{"class":97},[83,175,134],{"class":111},[83,177,137],{"class":97},[83,179,140],{"class":93},[83,181,143],{"class":97},[83,183,146],{"class":93},[83,185,149],{"class":97},[83,187,189,192,194,197,199,201,203,206,208,211,215,218,221,223,226,228,230,232],{"class":85,"line":188},4,[83,190,191],{"class":104},"  rowChanged",[83,193,108],{"class":97},[83,195,196],{"class":111},"row",[83,198,115],{"class":97},[83,200,140],{"class":93},[83,202,121],{"class":97},[83,204,205],{"class":111}," change",[83,207,115],{"class":97},[83,209,210],{"class":97}," \"",[83,212,214],{"class":213},"sfazB","add",[83,216,217],{"class":97},"\"",[83,219,220],{"class":97}," |",[83,222,210],{"class":97},[83,224,225],{"class":213},"remove",[83,227,217],{"class":97},[83,229,143],{"class":97},[83,231,146],{"class":93},[83,233,149],{"class":97},[83,235,237],{"class":85,"line":236},5,[83,238,239],{"class":97},"}\n",[241,242,243,256],"table",{},[244,245,246],"thead",{},[247,248,249,253],"tr",{},[250,251,252],"th",{},"Méthode",[250,254,255],{},"Appel",[257,258,259,270,280],"tbody",{},[247,260,261,267],{},[262,263,264],"td",{},[18,265,266],{},"pending",[262,268,269],{},"Une modification est en cours, pas encore validée. Utile pour la valider à l'enregistrement",[247,271,272,277],{},[262,273,274],{},[18,275,276],{},"commit",[262,278,279],{},"Un champ est validé, avec sa valeur",[247,281,282,287],{},[262,283,284],{},[18,285,286],{},"rowChanged",[262,288,289,290,292,293,295],{},"Une ligne de table est ajoutée (",[18,291,214],{},") ou supprimée (",[18,294,225],{},")",[14,297,298,299,301,302,305,306,309,310,312,313,316,317,312,319,322],{},"Pour un champ d'une ligne de table, ",[18,300,196],{}," donne l'adresse de la ligne : ",[18,303,304],{},"parentfield"," (le champ table) et ",[18,307,308],{},"key",". ",[18,311,308],{}," vaut ",[18,314,315],{},"name:\u003Cname>"," pour une ligne enregistrée. Tant que la ligne n'est pas enregistrée, ",[18,318,308],{},[18,320,321],{},"new:\u003C__row_id>",", avec son identifiant temporaire.",[14,324,325,326,328,329,332],{},"Sans fournisseur de ",[18,327,71],{},", 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 ",[18,330,331],{},"NO_COMMIT",".",[58,334,336],{"id":335},"exemple","Exemple",[14,338,339],{},"Exemple fictif : une page Vue recalcule le total d'une commande quand une quantité est validée.",[74,341,345],{"className":342,"code":343,"language":344,"meta":79,"style":79},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { provide, ref } from \"vue\";\nimport { FormLayout, CommitKey } from \"@framework\u002Fui\u002FFormLayout\";\n\nconst doc = ref({ items: [] });\n\nprovide(CommitKey, {\n  pending() {},\n  commit(fieldname, value, row) {\n    if (row?.parentfield === \"items\" && fieldname === \"qty\") {\n      recalculerTotal(doc.value); \u002F\u002F fonction de votre application\n    }\n  },\n  rowChanged(row, change) {\n    if (row.parentfield === \"items\") recalculerTotal(doc.value);\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFormLayout v-model:doc=\"doc\" :layout=\"layout\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[18,346,347,373,405,432,438,471,476,489,500,521,568,593,599,605,622,660,665,674,684,689,699,738],{"__ignoreMap":79},[83,348,349,352,355,358,361,364,366,368,370],{"class":85,"line":86},[83,350,351],{"class":97},"\u003C",[83,353,354],{"class":104},"script",[83,356,357],{"class":89}," setup",[83,359,360],{"class":89}," lang",[83,362,363],{"class":97},"=",[83,365,217],{"class":97},[83,367,78],{"class":213},[83,369,217],{"class":97},[83,371,372],{"class":97},">\n",[83,374,375,379,382,386,388,391,394,397,399,401,403],{"class":85,"line":101},[83,376,378],{"class":377},"s7zQu","import",[83,380,381],{"class":97}," {",[83,383,385],{"class":384},"sTEyZ"," provide",[83,387,121],{"class":97},[83,389,390],{"class":384}," ref",[83,392,393],{"class":97}," }",[83,395,396],{"class":377}," from",[83,398,210],{"class":97},[83,400,344],{"class":213},[83,402,217],{"class":97},[83,404,149],{"class":97},[83,406,407,409,411,414,416,419,421,423,425,428,430],{"class":85,"line":152},[83,408,378],{"class":377},[83,410,381],{"class":97},[83,412,413],{"class":384}," FormLayout",[83,415,121],{"class":97},[83,417,418],{"class":384}," CommitKey",[83,420,393],{"class":97},[83,422,396],{"class":377},[83,424,210],{"class":97},[83,426,427],{"class":213},"@framework\u002Fui\u002FFormLayout",[83,429,217],{"class":97},[83,431,149],{"class":97},[83,433,434],{"class":85,"line":188},[83,435,437],{"emptyLinePlaceholder":436},true,"\n",[83,439,440,443,446,448,451,453,456,459,461,464,467,469],{"class":85,"line":236},[83,441,442],{"class":89},"const",[83,444,445],{"class":384}," doc ",[83,447,363],{"class":97},[83,449,390],{"class":450},"s2Zo4",[83,452,108],{"class":384},[83,454,455],{"class":97},"{",[83,457,458],{"class":104}," items",[83,460,115],{"class":97},[83,462,463],{"class":384}," [] ",[83,465,466],{"class":97},"}",[83,468,295],{"class":384},[83,470,149],{"class":97},[83,472,474],{"class":85,"line":473},6,[83,475,437],{"emptyLinePlaceholder":436},[83,477,479,482,485,487],{"class":85,"line":478},7,[83,480,481],{"class":450},"provide",[83,483,484],{"class":384},"(CommitKey",[83,486,121],{"class":97},[83,488,98],{"class":97},[83,490,492,494,497],{"class":85,"line":491},8,[83,493,105],{"class":104},[83,495,496],{"class":97},"()",[83,498,499],{"class":97}," {},\n",[83,501,503,505,507,509,511,513,515,517,519],{"class":85,"line":502},9,[83,504,155],{"class":104},[83,506,108],{"class":97},[83,508,112],{"class":111},[83,510,121],{"class":97},[83,512,124],{"class":111},[83,514,121],{"class":97},[83,516,134],{"class":111},[83,518,295],{"class":97},[83,520,98],{"class":97},[83,522,524,527,530,532,535,537,540,542,545,547,550,553,555,557,560,562,565],{"class":85,"line":523},10,[83,525,526],{"class":377},"    if",[83,528,529],{"class":104}," (",[83,531,196],{"class":384},[83,533,534],{"class":97},"?.",[83,536,304],{"class":384},[83,538,539],{"class":97}," ===",[83,541,210],{"class":97},[83,543,544],{"class":213},"items",[83,546,217],{"class":97},[83,548,549],{"class":97}," &&",[83,551,552],{"class":384}," fieldname",[83,554,539],{"class":97},[83,556,210],{"class":97},[83,558,559],{"class":213},"qty",[83,561,217],{"class":97},[83,563,564],{"class":104},") ",[83,566,567],{"class":97},"{\n",[83,569,571,574,576,579,581,584,586,589],{"class":85,"line":570},11,[83,572,573],{"class":450},"      recalculerTotal",[83,575,108],{"class":104},[83,577,578],{"class":384},"doc",[83,580,332],{"class":97},[83,582,583],{"class":384},"value",[83,585,295],{"class":104},[83,587,588],{"class":97},";",[83,590,592],{"class":591},"sHwdD"," \u002F\u002F fonction de votre application\n",[83,594,596],{"class":85,"line":595},12,[83,597,598],{"class":97},"    }\n",[83,600,602],{"class":85,"line":601},13,[83,603,604],{"class":97},"  },\n",[83,606,608,610,612,614,616,618,620],{"class":85,"line":607},14,[83,609,191],{"class":104},[83,611,108],{"class":97},[83,613,196],{"class":111},[83,615,121],{"class":97},[83,617,205],{"class":111},[83,619,295],{"class":97},[83,621,98],{"class":97},[83,623,625,627,629,631,633,635,637,639,641,643,645,648,650,652,654,656,658],{"class":85,"line":624},15,[83,626,526],{"class":377},[83,628,529],{"class":104},[83,630,196],{"class":384},[83,632,332],{"class":97},[83,634,304],{"class":384},[83,636,539],{"class":97},[83,638,210],{"class":97},[83,640,544],{"class":213},[83,642,217],{"class":97},[83,644,564],{"class":104},[83,646,647],{"class":450},"recalculerTotal",[83,649,108],{"class":104},[83,651,578],{"class":384},[83,653,332],{"class":97},[83,655,583],{"class":384},[83,657,295],{"class":104},[83,659,149],{"class":97},[83,661,663],{"class":85,"line":662},16,[83,664,604],{"class":97},[83,666,668,670,672],{"class":85,"line":667},17,[83,669,466],{"class":97},[83,671,295],{"class":384},[83,673,149],{"class":97},[83,675,677,680,682],{"class":85,"line":676},18,[83,678,679],{"class":97},"\u003C\u002F",[83,681,354],{"class":104},[83,683,372],{"class":97},[83,685,687],{"class":85,"line":686},19,[83,688,437],{"emptyLinePlaceholder":436},[83,690,692,694,697],{"class":85,"line":691},20,[83,693,351],{"class":97},[83,695,696],{"class":104},"template",[83,698,372],{"class":97},[83,700,702,705,707,710,712,714,716,718,720,722,724,727,729,731,733,735],{"class":85,"line":701},21,[83,703,704],{"class":97},"  \u003C",[83,706,20],{"class":104},[83,708,709],{"class":89}," v-model",[83,711,115],{"class":97},[83,713,578],{"class":89},[83,715,363],{"class":97},[83,717,217],{"class":97},[83,719,578],{"class":384},[83,721,217],{"class":97},[83,723,72],{"class":97},[83,725,726],{"class":89},"layout",[83,728,363],{"class":97},[83,730,217],{"class":97},[83,732,726],{"class":384},[83,734,217],{"class":97},[83,736,737],{"class":97}," \u002F>\n",[83,739,741,743,745],{"class":85,"line":740},22,[83,742,679],{"class":97},[83,744,696],{"class":104},[83,746,372],{"class":97},[58,748,750],{"id":749},"événements-dun-champ","Événements d'un champ",[14,752,753,754,757,758,761,762,765],{},"Un nœud du schéma peut aussi porter des écouteurs dans ",[18,755,756],{},"ui.on"," : ",[18,759,760],{},"{ ui: { on: { change: (value) => … } } }",". Le champ émet ",[18,763,764],{},"change"," à sa validation. Dans une cellule de table, la ligne est passée en dernier argument.",[14,767,768,769,332],{},"Pour masquer ou renommer un onglet, voir ",[770,771,773],"a",{"href":772},"\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fpersonnalisation_onglets_formulaires","Personnalisation des onglets dans les formulaires",[775,776,777],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":79,"searchDepth":86,"depth":101,"links":779},[780,781,782],{"id":60,"depth":101,"text":61},{"id":335,"depth":101,"text":336},{"id":749,"depth":101,"text":750},"Canal de validation (CommitKey) du composant FormLayout de @framework\u002Fui pour réagir aux modifications de champs et de lignes de table dans une application Vue.","md",{"icon":786,"reviewed":436,"last_verified":787,"sources":788},"i-mdi-form-select","2026-11-04",[789,790,791],"dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FFields\u002Ftypes.ts","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002Ftypes.ts","dodock@v5:ui\u002Fsrc\u002Fcomponents\u002FFormLayout\u002FwarnMissingCommit.ts","\u002Fv5\u002Fdodock\u002Fdeveloppeurs\u002Fcomposants-ui\u002Fgestion-des-formulaires",{"title":5,"description":783},"1.v5\u002F3.dodock\u002F10.developpeurs\u002F03.composants-ui\u002Fgestion-des-formulaires","3M9z77_I8aCGs1sQuGpsnv_b8FFEp8VAIZ5P2ozbfZE",{},1794226464465]