[{"data":1,"prerenderedAt":3201},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component":358,"\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component-surround":3196},[4,14,36,69,140,341],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,182,207,211,295,320,324],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175,178],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":183,"path":184,"stem":185,"children":186,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[187,191,195,199,203],{"title":188,"path":189,"stem":190},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":192,"path":193,"stem":194},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":196,"path":197,"stem":198},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":200,"path":201,"stem":202},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344,"children":345,"page":35},"Deployment","\u002Fdeployment","6.deployment",[346,350,354],{"title":347,"path":348,"stem":349},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":351,"path":352,"stem":353},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":355,"path":356,"stem":357},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":359,"title":113,"badge":360,"body":363,"description":3190,"extension":3191,"links":3192,"meta":3193,"navigation":475,"path":114,"seo":3194,"stem":115,"__hash__":3195},"docs\u002F4.api\u002F2.components\u002F3.built-ins\u002F2.form-component.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":3175},"minimark",[366,381,386,389,432,436,439,819,823,828,876,912,921,925,935,1382,1396,1400,1403,1410,1417,1423,1429,1435,1445,1449,1464,1476,1482,1551,1554,1558,1567,1736,1739,1780,1786,2050,2054,2069,2129,2132,2192,2196,2199,2220,2225,2238,2699,3056,3060,3102,3106,3112,3158,3171],[367,368,369,370,373,374,377,378,380],"p",{},"The ",[371,372,246],"code",{}," component serialises any Symfony ",[371,375,376],{},"FormType"," into a JSON structure the front-end can render. No custom API endpoints, no front-end form library required — just a ",[371,379,376],{},", a Form resource, and a Vue component to render the fields.",[382,383,385],"h2",{"id":384},"enabling","Enabling",[367,387,388],{},"Enabled by default. To disable:",[390,391,396],"pre",{"className":392,"code":393,"language":394,"meta":395,"style":395},"language-yaml shiki shiki-themes github-light github-dark material-theme-palenight","silverback_api_components:\n    enabled_components:\n        form: false\n","yaml","",[371,397,398,411,419],{"__ignoreMap":395},[399,400,403,407],"span",{"class":401,"line":402},"line",1,[399,404,406],{"class":405},"s-h7I","silverback_api_components",[399,408,410],{"class":409},"sOvfz",":\n",[399,412,414,417],{"class":401,"line":413},2,[399,415,416],{"class":405},"    enabled_components",[399,418,410],{"class":409},[399,420,422,425,428],{"class":401,"line":421},3,[399,423,424],{"class":405},"        form",[399,426,427],{"class":409},":",[399,429,431],{"class":430},"swWMF"," false\n",[382,433,435],{"id":434},"step-1-create-a-symfony-formtype","Step 1: Create a Symfony FormType",[367,437,438],{},"Standard Symfony — no special base class or interface needed:",[390,440,444],{"className":441,"code":442,"language":443,"meta":395,"style":395},"language-php shiki shiki-themes github-light github-dark material-theme-palenight","\u002F\u002F src\u002FForm\u002FContactType.php\nnamespace App\\Form;\n\nuse Symfony\\Component\\Form\\AbstractType;\nuse Symfony\\Component\\Form\\Extension\\Core\\Type\\EmailType;\nuse Symfony\\Component\\Form\\Extension\\Core\\Type\\TextareaType;\nuse Symfony\\Component\\Form\\Extension\\Core\\Type\\TextType;\nuse Symfony\\Component\\Form\\FormBuilderInterface;\n\nclass ContactType extends AbstractType\n{\n    public function buildForm(FormBuilderInterface $builder, array $options): void\n    {\n        $builder\n            ->add('name', TextType::class)\n            ->add('email', EmailType::class)\n            ->add('message', TextareaType::class);\n    }\n}\n","php",[371,445,446,452,471,477,503,540,574,608,630,635,651,657,703,709,718,752,779,807,813],{"__ignoreMap":395},[399,447,448],{"class":401,"line":402},[399,449,451],{"class":450},"sTBSN","\u002F\u002F src\u002FForm\u002FContactType.php\n",[399,453,454,458,462,466,468],{"class":401,"line":413},[399,455,457],{"class":456},"stmX-","namespace",[399,459,461],{"class":460},"sRCss"," App",[399,463,465],{"class":464},"sn4go","\\",[399,467,246],{"class":460},[399,469,470],{"class":409},";\n",[399,472,473],{"class":401,"line":421},[399,474,476],{"emptyLinePlaceholder":475},true,"\n",[399,478,480,483,487,490,492,494,496,498,501],{"class":401,"line":479},4,[399,481,482],{"class":456},"use",[399,484,486],{"class":485},"sc2zw"," Symfony",[399,488,465],{"class":489},"sBtbT",[399,491,225],{"class":485},[399,493,465],{"class":489},[399,495,246],{"class":485},[399,497,465],{"class":489},[399,499,500],{"class":485},"AbstractType",[399,502,470],{"class":409},[399,504,506,508,510,512,514,516,518,520,523,525,528,530,533,535,538],{"class":401,"line":505},5,[399,507,482],{"class":456},[399,509,486],{"class":485},[399,511,465],{"class":489},[399,513,225],{"class":485},[399,515,465],{"class":489},[399,517,246],{"class":485},[399,519,465],{"class":489},[399,521,522],{"class":485},"Extension",[399,524,465],{"class":489},[399,526,527],{"class":485},"Core",[399,529,465],{"class":489},[399,531,532],{"class":485},"Type",[399,534,465],{"class":489},[399,536,537],{"class":485},"EmailType",[399,539,470],{"class":409},[399,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,572],{"class":401,"line":542},6,[399,544,482],{"class":456},[399,546,486],{"class":485},[399,548,465],{"class":489},[399,550,225],{"class":485},[399,552,465],{"class":489},[399,554,246],{"class":485},[399,556,465],{"class":489},[399,558,522],{"class":485},[399,560,465],{"class":489},[399,562,527],{"class":485},[399,564,465],{"class":489},[399,566,532],{"class":485},[399,568,465],{"class":489},[399,570,571],{"class":485},"TextareaType",[399,573,470],{"class":409},[399,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,606],{"class":401,"line":576},7,[399,578,482],{"class":456},[399,580,486],{"class":485},[399,582,465],{"class":489},[399,584,225],{"class":485},[399,586,465],{"class":489},[399,588,246],{"class":485},[399,590,465],{"class":489},[399,592,522],{"class":485},[399,594,465],{"class":489},[399,596,527],{"class":485},[399,598,465],{"class":489},[399,600,532],{"class":485},[399,602,465],{"class":489},[399,604,605],{"class":485},"TextType",[399,607,470],{"class":409},[399,609,611,613,615,617,619,621,623,625,628],{"class":401,"line":610},8,[399,612,482],{"class":456},[399,614,486],{"class":485},[399,616,465],{"class":489},[399,618,225],{"class":485},[399,620,465],{"class":489},[399,622,246],{"class":485},[399,624,465],{"class":489},[399,626,627],{"class":485},"FormBuilderInterface",[399,629,470],{"class":409},[399,631,633],{"class":401,"line":632},9,[399,634,476],{"emptyLinePlaceholder":475},[399,636,638,642,645,648],{"class":401,"line":637},10,[399,639,641],{"class":640},"swB56","class",[399,643,644],{"class":460}," ContactType",[399,646,647],{"class":640}," extends",[399,649,650],{"class":460}," AbstractType\n",[399,652,654],{"class":401,"line":653},11,[399,655,656],{"class":409},"{\n",[399,658,660,663,666,670,673,676,679,683,686,689,691,694,697,700],{"class":401,"line":659},12,[399,661,662],{"class":640},"    public",[399,664,665],{"class":640}," function",[399,667,669],{"class":668},"sKpYG"," buildForm",[399,671,672],{"class":409},"(",[399,674,627],{"class":675},"sbW4m",[399,677,678],{"class":409}," $",[399,680,682],{"class":681},"sPB8G","builder",[399,684,685],{"class":409},",",[399,687,688],{"class":456}," array",[399,690,678],{"class":409},[399,692,693],{"class":681},"options",[399,695,696],{"class":409},")",[399,698,427],{"class":699},"sVlFx",[399,701,702],{"class":456}," void\n",[399,704,706],{"class":401,"line":705},13,[399,707,708],{"class":409},"    {\n",[399,710,712,715],{"class":401,"line":711},14,[399,713,714],{"class":409},"        $",[399,716,717],{"class":681},"builder\n",[399,719,721,724,727,729,733,737,739,741,744,747,749],{"class":401,"line":720},15,[399,722,723],{"class":699},"            ->",[399,725,726],{"class":668},"add",[399,728,672],{"class":409},[399,730,732],{"class":731},"seSrl","'",[399,734,736],{"class":735},"sLL54","name",[399,738,732],{"class":731},[399,740,685],{"class":409},[399,742,743],{"class":675}," TextType",[399,745,746],{"class":699},"::",[399,748,641],{"class":456},[399,750,751],{"class":409},")\n",[399,753,755,757,759,761,763,766,768,770,773,775,777],{"class":401,"line":754},16,[399,756,723],{"class":699},[399,758,726],{"class":668},[399,760,672],{"class":409},[399,762,732],{"class":731},[399,764,765],{"class":735},"email",[399,767,732],{"class":731},[399,769,685],{"class":409},[399,771,772],{"class":675}," EmailType",[399,774,746],{"class":699},[399,776,641],{"class":456},[399,778,751],{"class":409},[399,780,782,784,786,788,790,793,795,797,800,802,804],{"class":401,"line":781},17,[399,783,723],{"class":699},[399,785,726],{"class":668},[399,787,672],{"class":409},[399,789,732],{"class":731},[399,791,792],{"class":735},"message",[399,794,732],{"class":731},[399,796,685],{"class":409},[399,798,799],{"class":675}," TextareaType",[399,801,746],{"class":699},[399,803,641],{"class":456},[399,805,806],{"class":409},");\n",[399,808,810],{"class":401,"line":809},18,[399,811,812],{"class":409},"    }\n",[399,814,816],{"class":401,"line":815},19,[399,817,818],{"class":409},"}\n",[382,820,822],{"id":821},"step-2-create-a-form-resource","Step 2: Create a Form Resource",[367,824,825,427],{},[371,826,827],{},"POST \u002Fcomponent\u002Fforms",[390,829,833],{"className":830,"code":831,"language":832,"meta":395,"style":395},"language-json shiki shiki-themes github-light github-dark material-theme-palenight","{\n    \"formType\": \"App\\\\Form\\\\ContactType\"\n}\n","json",[371,834,835,839,872],{"__ignoreMap":395},[399,836,837],{"class":401,"line":402},[399,838,656],{"class":409},[399,840,841,844,848,851,853,856,859,862,864,866,869],{"class":401,"line":413},[399,842,843],{"class":489},"    \"",[399,845,847],{"class":846},"sphPO","formType",[399,849,850],{"class":489},"\"",[399,852,427],{"class":409},[399,854,855],{"class":731}," \"",[399,857,858],{"class":735},"App",[399,860,861],{"class":485},"\\\\",[399,863,246],{"class":735},[399,865,861],{"class":485},[399,867,868],{"class":735},"ContactType",[399,870,871],{"class":731},"\"\n",[399,873,874],{"class":401,"line":421},[399,875,818],{"class":409},[877,878,879,894],"table",{},[880,881,882],"thead",{},[883,884,885,889,891],"tr",{},[886,887,888],"th",{},"Field",[886,890,532],{},[886,892,893],{},"Description",[895,896,897],"tbody",{},[883,898,899,904,909],{},[900,901,902],"td",{},[371,903,847],{},[900,905,906],{},[371,907,908],{},"string",[900,910,911],{},"Fully-qualified class name of your FormType",[367,913,369,914,916,917,920],{},[371,915,847],{}," field is validated by ",[371,918,919],{},"FormTypeClass"," constraint — it must be a registered Symfony form type.",[382,922,924],{"id":923},"the-formview-response","The formView Response",[367,926,369,927,930,931,934],{},[371,928,929],{},"formView"," property is populated by ",[371,932,933],{},"FormStateProvider"," and contains the serialized form tree:",[390,936,938],{"className":830,"code":937,"language":832,"meta":395,"style":395},"{\n    \"@id\": \"\u002Fcomponent\u002Fforms\u002F018e-...\",\n    \"formType\": \"App\\\\Form\\\\ContactType\",\n    \"formView\": {\n        \"vars\": {\n            \"valid\": true,\n            \"submitted\": false,\n            \"errors\": [],\n            \"method\": \"POST\",\n            \"attr\": {}\n        },\n        \"children\": {\n            \"name\": {\n                \"vars\": {\n                    \"name\": \"name\",\n                    \"full_name\": \"contact[name]\",\n                    \"id\": \"contact_name\",\n                    \"value\": \"\",\n                    \"required\": true,\n                    \"errors\": [],\n                    \"block_prefixes\": [\"form\", \"text\", \"_contact_name\"]\n                }\n            },\n            \"email\": { \"vars\": { \u002F* ... *\u002F } },\n            \"message\": { \"vars\": { \u002F* ... *\u002F } }\n        }\n    }\n}\n",[371,939,940,944,965,991,1004,1018,1036,1052,1066,1086,1100,1105,1118,1130,1144,1164,1184,1204,1220,1235,1248,1291,1297,1303,1336,1366,1372,1377],{"__ignoreMap":395},[399,941,942],{"class":401,"line":402},[399,943,656],{"class":409},[399,945,946,948,951,953,955,957,960,962],{"class":401,"line":413},[399,947,843],{"class":489},[399,949,950],{"class":846},"@id",[399,952,850],{"class":489},[399,954,427],{"class":409},[399,956,855],{"class":731},[399,958,959],{"class":735},"\u002Fcomponent\u002Fforms\u002F018e-...",[399,961,850],{"class":731},[399,963,964],{"class":409},",\n",[399,966,967,969,971,973,975,977,979,981,983,985,987,989],{"class":401,"line":421},[399,968,843],{"class":489},[399,970,847],{"class":846},[399,972,850],{"class":489},[399,974,427],{"class":409},[399,976,855],{"class":731},[399,978,858],{"class":735},[399,980,861],{"class":485},[399,982,246],{"class":735},[399,984,861],{"class":485},[399,986,868],{"class":735},[399,988,850],{"class":731},[399,990,964],{"class":409},[399,992,993,995,997,999,1001],{"class":401,"line":479},[399,994,843],{"class":489},[399,996,929],{"class":846},[399,998,850],{"class":489},[399,1000,427],{"class":409},[399,1002,1003],{"class":409}," {\n",[399,1005,1006,1009,1012,1014,1016],{"class":401,"line":505},[399,1007,1008],{"class":489},"        \"",[399,1010,1011],{"class":675},"vars",[399,1013,850],{"class":489},[399,1015,427],{"class":409},[399,1017,1003],{"class":409},[399,1019,1020,1023,1027,1029,1031,1034],{"class":401,"line":542},[399,1021,1022],{"class":489},"            \"",[399,1024,1026],{"class":1025},"scSvc","valid",[399,1028,850],{"class":489},[399,1030,427],{"class":409},[399,1032,1033],{"class":489}," true",[399,1035,964],{"class":409},[399,1037,1038,1040,1043,1045,1047,1050],{"class":401,"line":576},[399,1039,1022],{"class":489},[399,1041,1042],{"class":1025},"submitted",[399,1044,850],{"class":489},[399,1046,427],{"class":409},[399,1048,1049],{"class":489}," false",[399,1051,964],{"class":409},[399,1053,1054,1056,1059,1061,1063],{"class":401,"line":610},[399,1055,1022],{"class":489},[399,1057,1058],{"class":1025},"errors",[399,1060,850],{"class":489},[399,1062,427],{"class":409},[399,1064,1065],{"class":409}," [],\n",[399,1067,1068,1070,1073,1075,1077,1079,1082,1084],{"class":401,"line":632},[399,1069,1022],{"class":489},[399,1071,1072],{"class":1025},"method",[399,1074,850],{"class":489},[399,1076,427],{"class":409},[399,1078,855],{"class":731},[399,1080,1081],{"class":735},"POST",[399,1083,850],{"class":731},[399,1085,964],{"class":409},[399,1087,1088,1090,1093,1095,1097],{"class":401,"line":637},[399,1089,1022],{"class":489},[399,1091,1092],{"class":1025},"attr",[399,1094,850],{"class":489},[399,1096,427],{"class":409},[399,1098,1099],{"class":409}," {}\n",[399,1101,1102],{"class":401,"line":653},[399,1103,1104],{"class":409},"        },\n",[399,1106,1107,1109,1112,1114,1116],{"class":401,"line":659},[399,1108,1008],{"class":489},[399,1110,1111],{"class":675},"children",[399,1113,850],{"class":489},[399,1115,427],{"class":409},[399,1117,1003],{"class":409},[399,1119,1120,1122,1124,1126,1128],{"class":401,"line":705},[399,1121,1022],{"class":489},[399,1123,736],{"class":1025},[399,1125,850],{"class":489},[399,1127,427],{"class":409},[399,1129,1003],{"class":409},[399,1131,1132,1135,1138,1140,1142],{"class":401,"line":711},[399,1133,1134],{"class":489},"                \"",[399,1136,1011],{"class":1137},"sadgS",[399,1139,850],{"class":489},[399,1141,427],{"class":409},[399,1143,1003],{"class":409},[399,1145,1146,1149,1152,1154,1156,1158,1160,1162],{"class":401,"line":720},[399,1147,1148],{"class":489},"                    \"",[399,1150,736],{"class":1151},"sErdZ",[399,1153,850],{"class":489},[399,1155,427],{"class":409},[399,1157,855],{"class":731},[399,1159,736],{"class":735},[399,1161,850],{"class":731},[399,1163,964],{"class":409},[399,1165,1166,1168,1171,1173,1175,1177,1180,1182],{"class":401,"line":754},[399,1167,1148],{"class":489},[399,1169,1170],{"class":1151},"full_name",[399,1172,850],{"class":489},[399,1174,427],{"class":409},[399,1176,855],{"class":731},[399,1178,1179],{"class":735},"contact[name]",[399,1181,850],{"class":731},[399,1183,964],{"class":409},[399,1185,1186,1188,1191,1193,1195,1197,1200,1202],{"class":401,"line":781},[399,1187,1148],{"class":489},[399,1189,1190],{"class":1151},"id",[399,1192,850],{"class":489},[399,1194,427],{"class":409},[399,1196,855],{"class":731},[399,1198,1199],{"class":735},"contact_name",[399,1201,850],{"class":731},[399,1203,964],{"class":409},[399,1205,1206,1208,1211,1213,1215,1218],{"class":401,"line":809},[399,1207,1148],{"class":489},[399,1209,1210],{"class":1151},"value",[399,1212,850],{"class":489},[399,1214,427],{"class":409},[399,1216,1217],{"class":731}," \"\"",[399,1219,964],{"class":409},[399,1221,1222,1224,1227,1229,1231,1233],{"class":401,"line":815},[399,1223,1148],{"class":489},[399,1225,1226],{"class":1151},"required",[399,1228,850],{"class":489},[399,1230,427],{"class":409},[399,1232,1033],{"class":489},[399,1234,964],{"class":409},[399,1236,1238,1240,1242,1244,1246],{"class":401,"line":1237},20,[399,1239,1148],{"class":489},[399,1241,1058],{"class":1151},[399,1243,850],{"class":489},[399,1245,427],{"class":409},[399,1247,1065],{"class":409},[399,1249,1251,1253,1256,1258,1260,1263,1265,1268,1270,1272,1274,1277,1279,1281,1283,1286,1288],{"class":401,"line":1250},21,[399,1252,1148],{"class":489},[399,1254,1255],{"class":1151},"block_prefixes",[399,1257,850],{"class":489},[399,1259,427],{"class":409},[399,1261,1262],{"class":409}," [",[399,1264,850],{"class":731},[399,1266,1267],{"class":735},"form",[399,1269,850],{"class":731},[399,1271,685],{"class":409},[399,1273,855],{"class":731},[399,1275,1276],{"class":735},"text",[399,1278,850],{"class":731},[399,1280,685],{"class":409},[399,1282,855],{"class":731},[399,1284,1285],{"class":735},"_contact_name",[399,1287,850],{"class":731},[399,1289,1290],{"class":409},"]\n",[399,1292,1294],{"class":401,"line":1293},22,[399,1295,1296],{"class":409},"                }\n",[399,1298,1300],{"class":401,"line":1299},23,[399,1301,1302],{"class":409},"            },\n",[399,1304,1306,1308,1310,1312,1314,1317,1319,1321,1323,1325,1327,1330,1333],{"class":401,"line":1305},24,[399,1307,1022],{"class":489},[399,1309,765],{"class":1025},[399,1311,850],{"class":489},[399,1313,427],{"class":409},[399,1315,1316],{"class":409}," {",[399,1318,855],{"class":489},[399,1320,1011],{"class":1137},[399,1322,850],{"class":489},[399,1324,427],{"class":409},[399,1326,1316],{"class":409},[399,1328,1329],{"class":450}," \u002F* ... *\u002F",[399,1331,1332],{"class":409}," }",[399,1334,1335],{"class":409}," },\n",[399,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363],{"class":401,"line":1338},25,[399,1340,1022],{"class":489},[399,1342,792],{"class":1025},[399,1344,850],{"class":489},[399,1346,427],{"class":409},[399,1348,1316],{"class":409},[399,1350,855],{"class":489},[399,1352,1011],{"class":1137},[399,1354,850],{"class":489},[399,1356,427],{"class":409},[399,1358,1316],{"class":409},[399,1360,1329],{"class":450},[399,1362,1332],{"class":409},[399,1364,1365],{"class":409}," }\n",[399,1367,1369],{"class":401,"line":1368},26,[399,1370,1371],{"class":409},"        }\n",[399,1373,1375],{"class":401,"line":1374},27,[399,1376,812],{"class":409},[399,1378,1380],{"class":401,"line":1379},28,[399,1381,818],{"class":409},[367,1383,1384,1386,1387,1389,1390,1389,1392,1395],{},[371,1385,1255],{}," tells the front-end which field type to render — ",[371,1388,1276],{},", ",[371,1391,765],{},[371,1393,1394],{},"textarea",", etc.",[382,1397,1399],{"id":1398},"submitting-the-form","Submitting the Form",[367,1401,1402],{},"Two submission modes exist at different endpoints:",[367,1404,1405,1409],{},[1406,1407,1408],"strong",{},"Field validation (PATCH)"," — validate individual fields without full submission:",[390,1411,1415],{"className":1412,"code":1414,"language":1276},[1413],"language-text","PATCH \u002Fcomponent\u002Fforms\u002F{id}\u002Fsubmit\nContent-Type: application\u002Fmerge-patch+json\n\n{ \"contact\": { \"name\": \"Alice\" } }\n",[371,1416,1414],{"__ignoreMap":395},[367,1418,1419,1420,1422],{},"Returns the updated ",[371,1421,929],{}," with per-field errors. HTTP 200 = valid, 422 = invalid.",[367,1424,1425,1428],{},[1406,1426,1427],{},"Full submission (POST)"," — submit all fields:",[390,1430,1433],{"className":1431,"code":1432,"language":1276},[1413],"POST \u002Fcomponent\u002Fforms\u002F{id}\u002Fsubmit\nContent-Type: application\u002Fjson\n\n{ \"contact\": { \"name\": \"Alice\", \"email\": \"alice@example.com\", \"message\": \"Hello!\" } }\n",[371,1434,1432],{"__ignoreMap":395},[367,1436,1437,1438,1441,1442,1444],{},"HTTP 201 = success (fires ",[371,1439,1440],{},"FormSuccessEvent","), 422 = validation failed with ",[371,1443,929],{}," errors.",[382,1446,1448],{"id":1447},"submission-endpoint","Submission Endpoint",[367,1450,1451,1452,1455,1456,1459,1460,1463],{},"Form data is only accepted when the request path ends with ",[371,1453,1454],{},"\u002Fsubmit",". ",[371,1457,1458],{},"FormViewFactory"," sets ",[371,1461,1462],{},"vars.action"," in the form view to the absolute submit URL automatically — consuming composables read this value directly, so you never need to hardcode the endpoint in your front-end code.",[367,1465,369,1466,1468,1469,1472,1473,1475],{},[371,1467,950],{}," in the submit response is the canonical Form IRI (e.g. ",[371,1470,1471],{},"\u002Fcomponent\u002Fforms\u002F{uuid}","), not the submit URL — the ",[371,1474,1454],{}," suffix is stripped before the response is returned.",[367,1477,1478,1479,427],{},"For public-facing forms (e.g. contact forms), the submit path must be explicitly allowed in ",[371,1480,1481],{},"security.yaml",[390,1483,1485],{"className":392,"code":1484,"language":394,"meta":395,"style":395},"access_control:\n    - { path: '^\u002Fcomponent\u002Fforms\u002F.*\u002Fsubmit$', methods: ['POST', 'PATCH'], roles: PUBLIC_ACCESS }\n",[371,1486,1487,1494],{"__ignoreMap":395},[399,1488,1489,1492],{"class":401,"line":402},[399,1490,1491],{"class":405},"access_control",[399,1493,410],{"class":409},[399,1495,1496,1499,1501,1504,1506,1509,1512,1514,1516,1519,1521,1523,1525,1527,1529,1531,1533,1536,1538,1541,1544,1546,1549],{"class":401,"line":413},[399,1497,1498],{"class":409},"    -",[399,1500,1316],{"class":409},[399,1502,1503],{"class":405}," path",[399,1505,427],{"class":409},[399,1507,1508],{"class":731}," '",[399,1510,1511],{"class":735},"^\u002Fcomponent\u002Fforms\u002F.*\u002Fsubmit$",[399,1513,732],{"class":731},[399,1515,685],{"class":409},[399,1517,1518],{"class":405}," methods",[399,1520,427],{"class":409},[399,1522,1262],{"class":409},[399,1524,732],{"class":731},[399,1526,1081],{"class":735},[399,1528,732],{"class":731},[399,1530,685],{"class":409},[399,1532,1508],{"class":731},[399,1534,1535],{"class":735},"PATCH",[399,1537,732],{"class":731},[399,1539,1540],{"class":409},"],",[399,1542,1543],{"class":405}," roles",[399,1545,427],{"class":409},[399,1547,1548],{"class":735}," PUBLIC_ACCESS",[399,1550,1365],{"class":409},[367,1552,1553],{},"Remove or restrict this rule if the form should only be accessible to authenticated users.",[382,1555,1557],{"id":1556},"handling-success-on-the-back-end","Handling Success on the Back-End",[367,1559,1560,1562,1563,1566],{},[371,1561,1440],{}," is dispatched on a successful submission. The simplest approach is ",[371,1564,1565],{},"EntityPersistFormListener"," — extend it to automatically persist the form data:",[390,1568,1570],{"className":441,"code":1569,"language":443,"meta":395,"style":395},"\u002F\u002F src\u002FEventListener\u002FForm\u002FContactFormListener.php\nnamespace App\\EventListener\\Form;\n\nuse App\\Form\\ContactType;\nuse App\\Entity\\Contact;\nuse Silverback\\ApiComponentsBundle\\EventListener\\Form\\EntityPersistFormListener;\n\nclass ContactFormListener extends EntityPersistFormListener\n{\n    public function __construct()\n    {\n        parent::__construct(ContactType::class, Contact::class, true);\n    }\n}\n",[371,1571,1572,1577,1594,1598,1614,1632,1658,1662,1674,1678,1691,1695,1728,1732],{"__ignoreMap":395},[399,1573,1574],{"class":401,"line":402},[399,1575,1576],{"class":450},"\u002F\u002F src\u002FEventListener\u002FForm\u002FContactFormListener.php\n",[399,1578,1579,1581,1583,1585,1588,1590,1592],{"class":401,"line":413},[399,1580,457],{"class":456},[399,1582,461],{"class":460},[399,1584,465],{"class":464},[399,1586,1587],{"class":460},"EventListener",[399,1589,465],{"class":464},[399,1591,246],{"class":460},[399,1593,470],{"class":409},[399,1595,1596],{"class":401,"line":421},[399,1597,476],{"emptyLinePlaceholder":475},[399,1599,1600,1602,1604,1606,1608,1610,1612],{"class":401,"line":479},[399,1601,482],{"class":456},[399,1603,461],{"class":485},[399,1605,465],{"class":489},[399,1607,246],{"class":485},[399,1609,465],{"class":489},[399,1611,868],{"class":485},[399,1613,470],{"class":409},[399,1615,1616,1618,1620,1622,1625,1627,1630],{"class":401,"line":505},[399,1617,482],{"class":456},[399,1619,461],{"class":485},[399,1621,465],{"class":489},[399,1623,1624],{"class":485},"Entity",[399,1626,465],{"class":489},[399,1628,1629],{"class":485},"Contact",[399,1631,470],{"class":409},[399,1633,1634,1636,1639,1641,1644,1646,1648,1650,1652,1654,1656],{"class":401,"line":542},[399,1635,482],{"class":456},[399,1637,1638],{"class":485}," Silverback",[399,1640,465],{"class":489},[399,1642,1643],{"class":485},"ApiComponentsBundle",[399,1645,465],{"class":489},[399,1647,1587],{"class":485},[399,1649,465],{"class":489},[399,1651,246],{"class":485},[399,1653,465],{"class":489},[399,1655,1565],{"class":485},[399,1657,470],{"class":409},[399,1659,1660],{"class":401,"line":576},[399,1661,476],{"emptyLinePlaceholder":475},[399,1663,1664,1666,1669,1671],{"class":401,"line":610},[399,1665,641],{"class":640},[399,1667,1668],{"class":460}," ContactFormListener",[399,1670,647],{"class":640},[399,1672,1673],{"class":460}," EntityPersistFormListener\n",[399,1675,1676],{"class":401,"line":632},[399,1677,656],{"class":409},[399,1679,1680,1682,1684,1688],{"class":401,"line":637},[399,1681,662],{"class":640},[399,1683,665],{"class":640},[399,1685,1687],{"class":1686},"s3Ny6"," __construct",[399,1689,1690],{"class":409},"()\n",[399,1692,1693],{"class":401,"line":653},[399,1694,708],{"class":409},[399,1696,1697,1700,1702,1705,1707,1709,1711,1713,1715,1718,1720,1722,1724,1726],{"class":401,"line":659},[399,1698,1699],{"class":640},"        parent",[399,1701,746],{"class":699},[399,1703,1704],{"class":668},"__construct",[399,1706,672],{"class":409},[399,1708,868],{"class":675},[399,1710,746],{"class":699},[399,1712,641],{"class":456},[399,1714,685],{"class":409},[399,1716,1717],{"class":675}," Contact",[399,1719,746],{"class":699},[399,1721,641],{"class":456},[399,1723,685],{"class":409},[399,1725,1033],{"class":489},[399,1727,806],{"class":409},[399,1729,1730],{"class":401,"line":705},[399,1731,812],{"class":409},[399,1733,1734],{"class":401,"line":711},[399,1735,818],{"class":409},[367,1737,1738],{},"Register it as a subscriber:",[390,1740,1742],{"className":392,"code":1741,"language":394,"meta":395,"style":395},"# config\u002Fservices.yaml\nApp\\EventListener\\Form\\ContactFormListener:\n    tags:\n        - { name: kernel.event_subscriber }\n",[371,1743,1744,1749,1756,1763],{"__ignoreMap":395},[399,1745,1746],{"class":401,"line":402},[399,1747,1748],{"class":450},"# config\u002Fservices.yaml\n",[399,1750,1751,1754],{"class":401,"line":413},[399,1752,1753],{"class":405},"App\\EventListener\\Form\\ContactFormListener",[399,1755,410],{"class":409},[399,1757,1758,1761],{"class":401,"line":421},[399,1759,1760],{"class":405},"    tags",[399,1762,410],{"class":409},[399,1764,1765,1768,1770,1773,1775,1778],{"class":401,"line":479},[399,1766,1767],{"class":409},"        -",[399,1769,1316],{"class":409},[399,1771,1772],{"class":405}," name",[399,1774,427],{"class":409},[399,1776,1777],{"class":735}," kernel.event_subscriber",[399,1779,1365],{"class":409},[367,1781,1782,1783,1785],{},"For custom logic — sending emails, calling external APIs — listen to ",[371,1784,1440],{}," directly:",[390,1787,1789],{"className":441,"code":1788,"language":443,"meta":395,"style":395},"use Silverback\\ApiComponentsBundle\\Event\\FormSuccessEvent;\nuse Symfony\\Component\\EventDispatcher\\EventSubscriberInterface;\n\nclass ContactSuccessListener implements EventSubscriberInterface\n{\n    public static function getSubscribedEvents(): array\n    {\n        return [FormSuccessEvent::class => 'onSuccess'];\n    }\n\n    public function onSuccess(FormSuccessEvent $event): void\n    {\n        $form = $event->getForm();       \u002F\u002F the Form component resource\n        $data = $event->getFormData();   \u002F\u002F the submitted data object\n\n        \u002F\u002F Send email, create records, etc.\n\n        \u002F\u002F Optional: set a result to serialize back to the client\n        $event->result = ['status' => 'sent'];\n    }\n}\n",[371,1790,1791,1812,1834,1838,1851,1855,1875,1879,1906,1910,1914,1938,1942,1968,1991,1995,2000,2004,2009,2042,2046],{"__ignoreMap":395},[399,1792,1793,1795,1797,1799,1801,1803,1806,1808,1810],{"class":401,"line":402},[399,1794,482],{"class":456},[399,1796,1638],{"class":485},[399,1798,465],{"class":489},[399,1800,1643],{"class":485},[399,1802,465],{"class":489},[399,1804,1805],{"class":485},"Event",[399,1807,465],{"class":489},[399,1809,1440],{"class":485},[399,1811,470],{"class":409},[399,1813,1814,1816,1818,1820,1822,1824,1827,1829,1832],{"class":401,"line":413},[399,1815,482],{"class":456},[399,1817,486],{"class":485},[399,1819,465],{"class":489},[399,1821,225],{"class":485},[399,1823,465],{"class":489},[399,1825,1826],{"class":485},"EventDispatcher",[399,1828,465],{"class":489},[399,1830,1831],{"class":485},"EventSubscriberInterface",[399,1833,470],{"class":409},[399,1835,1836],{"class":401,"line":421},[399,1837,476],{"emptyLinePlaceholder":475},[399,1839,1840,1842,1845,1848],{"class":401,"line":479},[399,1841,641],{"class":640},[399,1843,1844],{"class":460}," ContactSuccessListener",[399,1846,1847],{"class":640}," implements",[399,1849,1850],{"class":460}," EventSubscriberInterface\n",[399,1852,1853],{"class":401,"line":505},[399,1854,656],{"class":409},[399,1856,1857,1859,1862,1864,1867,1870,1872],{"class":401,"line":542},[399,1858,662],{"class":640},[399,1860,1861],{"class":640}," static",[399,1863,665],{"class":640},[399,1865,1866],{"class":668}," getSubscribedEvents",[399,1868,1869],{"class":409},"()",[399,1871,427],{"class":699},[399,1873,1874],{"class":456}," array\n",[399,1876,1877],{"class":401,"line":576},[399,1878,708],{"class":409},[399,1880,1881,1885,1887,1889,1891,1893,1896,1898,1901,1903],{"class":401,"line":610},[399,1882,1884],{"class":1883},"sm4w6","        return",[399,1886,1262],{"class":409},[399,1888,1440],{"class":675},[399,1890,746],{"class":699},[399,1892,641],{"class":456},[399,1894,1895],{"class":699}," =>",[399,1897,1508],{"class":731},[399,1899,1900],{"class":735},"onSuccess",[399,1902,732],{"class":731},[399,1904,1905],{"class":409},"];\n",[399,1907,1908],{"class":401,"line":632},[399,1909,812],{"class":409},[399,1911,1912],{"class":401,"line":637},[399,1913,476],{"emptyLinePlaceholder":475},[399,1915,1916,1918,1920,1923,1925,1927,1929,1932,1934,1936],{"class":401,"line":653},[399,1917,662],{"class":640},[399,1919,665],{"class":640},[399,1921,1922],{"class":668}," onSuccess",[399,1924,672],{"class":409},[399,1926,1440],{"class":675},[399,1928,678],{"class":409},[399,1930,1931],{"class":681},"event",[399,1933,696],{"class":409},[399,1935,427],{"class":699},[399,1937,702],{"class":456},[399,1939,1940],{"class":401,"line":659},[399,1941,708],{"class":409},[399,1943,1944,1946,1949,1952,1954,1956,1959,1962,1965],{"class":401,"line":705},[399,1945,714],{"class":409},[399,1947,1948],{"class":681},"form ",[399,1950,1951],{"class":699},"=",[399,1953,678],{"class":409},[399,1955,1931],{"class":681},[399,1957,1958],{"class":699},"->",[399,1960,1961],{"class":668},"getForm",[399,1963,1964],{"class":409},"();",[399,1966,1967],{"class":450},"       \u002F\u002F the Form component resource\n",[399,1969,1970,1972,1975,1977,1979,1981,1983,1986,1988],{"class":401,"line":711},[399,1971,714],{"class":409},[399,1973,1974],{"class":681},"data ",[399,1976,1951],{"class":699},[399,1978,678],{"class":409},[399,1980,1931],{"class":681},[399,1982,1958],{"class":699},[399,1984,1985],{"class":668},"getFormData",[399,1987,1964],{"class":409},[399,1989,1990],{"class":450},"   \u002F\u002F the submitted data object\n",[399,1992,1993],{"class":401,"line":720},[399,1994,476],{"emptyLinePlaceholder":475},[399,1996,1997],{"class":401,"line":754},[399,1998,1999],{"class":450},"        \u002F\u002F Send email, create records, etc.\n",[399,2001,2002],{"class":401,"line":781},[399,2003,476],{"emptyLinePlaceholder":475},[399,2005,2006],{"class":401,"line":809},[399,2007,2008],{"class":450},"        \u002F\u002F Optional: set a result to serialize back to the client\n",[399,2010,2011,2013,2015,2017,2020,2022,2024,2026,2029,2031,2033,2035,2038,2040],{"class":401,"line":815},[399,2012,714],{"class":409},[399,2014,1931],{"class":681},[399,2016,1958],{"class":699},[399,2018,2019],{"class":681},"result ",[399,2021,1951],{"class":699},[399,2023,1262],{"class":409},[399,2025,732],{"class":731},[399,2027,2028],{"class":735},"status",[399,2030,732],{"class":731},[399,2032,1895],{"class":699},[399,2034,1508],{"class":731},[399,2036,2037],{"class":735},"sent",[399,2039,732],{"class":731},[399,2041,1905],{"class":409},[399,2043,2044],{"class":401,"line":1237},[399,2045,812],{"class":409},[399,2047,2048],{"class":401,"line":1250},[399,2049,818],{"class":409},[382,2051,2053],{"id":2052},"security","Security",[367,2055,2056,2057,2059,2060,2062,2063,2065,2066,427],{},"Form submission endpoints are anonymous by default (useful for contact forms). The Flex recipe's ",[371,2058,1481],{}," allows anonymous ",[371,2061,1081],{}," and ",[371,2064,1535],{}," to ",[371,2067,2068],{},"\u002Fcomponent\u002Fforms",[390,2070,2072],{"className":392,"code":2071,"language":394,"meta":395,"style":395},"access_control:\n    - { path: '^\u002Fcomponent\u002Fforms\u002F.*\u002Fsubmit', methods: ['POST', 'PATCH'], roles: PUBLIC_ACCESS }\n",[371,2073,2074,2080],{"__ignoreMap":395},[399,2075,2076,2078],{"class":401,"line":402},[399,2077,1491],{"class":405},[399,2079,410],{"class":409},[399,2081,2082,2084,2086,2088,2090,2092,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117,2119,2121,2123,2125,2127],{"class":401,"line":413},[399,2083,1498],{"class":409},[399,2085,1316],{"class":409},[399,2087,1503],{"class":405},[399,2089,427],{"class":409},[399,2091,1508],{"class":731},[399,2093,2094],{"class":735},"^\u002Fcomponent\u002Fforms\u002F.*\u002Fsubmit",[399,2096,732],{"class":731},[399,2098,685],{"class":409},[399,2100,1518],{"class":405},[399,2102,427],{"class":409},[399,2104,1262],{"class":409},[399,2106,732],{"class":731},[399,2108,1081],{"class":735},[399,2110,732],{"class":731},[399,2112,685],{"class":409},[399,2114,1508],{"class":731},[399,2116,1535],{"class":735},[399,2118,732],{"class":731},[399,2120,1540],{"class":409},[399,2122,1543],{"class":405},[399,2124,427],{"class":409},[399,2126,1548],{"class":735},[399,2128,1365],{"class":409},[367,2130,2131],{},"Protect specific form types with a Symfony voter if some forms should be authenticated-only:",[390,2133,2135],{"className":441,"code":2134,"language":443,"meta":395,"style":395},"if (!$this->security->isGranted('ROLE_USER')) {\n    throw new AccessDeniedException();\n}\n",[371,2136,2137,2174,2188],{"__ignoreMap":395},[399,2138,2139,2142,2145,2148,2151,2153,2155,2157,2160,2162,2164,2167,2169,2172],{"class":401,"line":402},[399,2140,2141],{"class":1883},"if",[399,2143,2144],{"class":409}," (",[399,2146,2147],{"class":699},"!",[399,2149,2150],{"class":489},"$this",[399,2152,1958],{"class":699},[399,2154,2052],{"class":681},[399,2156,1958],{"class":699},[399,2158,2159],{"class":668},"isGranted",[399,2161,672],{"class":409},[399,2163,732],{"class":731},[399,2165,2166],{"class":735},"ROLE_USER",[399,2168,732],{"class":731},[399,2170,2171],{"class":409},"))",[399,2173,1003],{"class":409},[399,2175,2176,2179,2182,2185],{"class":401,"line":413},[399,2177,2178],{"class":1883},"    throw",[399,2180,2181],{"class":456}," new",[399,2183,2184],{"class":675}," AccessDeniedException",[399,2186,2187],{"class":409},"();\n",[399,2189,2190],{"class":401,"line":421},[399,2191,818],{"class":409},[382,2193,2195],{"id":2194},"on-the-front-end","On the Front-End",[367,2197,2198],{},"Two composables handle the Vue side of a Form component:",[2200,2201,2202,2212],"ul",{},[2203,2204,2205,2211],"li",{},[2206,2207,2208],"a",{"href":247},[371,2209,2210],{},"useCwaForm(iri)"," — manages submission, tracks in-flight state, and exposes form-level errors",[2203,2213,2214,2219],{},[2206,2215,2216],{"href":251},[371,2217,2218],{},"useCwaFormInput(iri, fullName)"," — binds a single field to a reactive value, validates on input, and controls when errors are shown",[2221,2222,2224],"h3",{"id":2223},"rendering-a-form","Rendering a form",[367,2226,2227,2228,2231,2232,2235,2236,427],{},"The top-level form component fetches the Form resource via ",[371,2229,2230],{},"useCwaResource"," and delegates field rendering to child components — one per field. Each child calls ",[371,2233,2234],{},"useCwaFormInput"," with the field's ",[371,2237,1170],{},[390,2239,2243],{"className":2240,"code":2241,"language":2242,"meta":395,"style":395},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003C!-- components\u002Fforms\u002FContactForm.vue -->\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ iri: string }>()\nconst { resource } = useCwaResource(props)\nconst iriRef = toRef(props, 'iri')\nconst { submit, submitting, success, formErrors } = useCwaForm(iriRef)\n\nconst fields = computed(() => resource.value?.formView ?? {})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submit\">\n    \u003CContactFormField\n      v-for=\"(field, fullName) in fields\"\n      :key=\"fullName\"\n      :iri=\"props.iri\"\n      :full-name=\"fullName\"\n    \u002F>\n\n    \u003Cp v-for=\"error in formErrors\" :key=\"error\" class=\"text-red-500\">{{ error }}\u003C\u002Fp>\n\n    \u003Cbutton type=\"submit\" :disabled=\"submitting\">\n      {{ submitting ? 'Sending…' : 'Submit' }}\n    \u003C\u002Fbutton>\n\n    \u003Cp v-if=\"success\">Sent!\u003C\u002Fp>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n","vue",[371,2244,2245,2250,2277,2308,2327,2353,2387,2391,2430,2439,2443,2452,2473,2481,2495,2509,2523,2536,2541,2545,2599,2603,2635,2640,2649,2653,2682,2691],{"__ignoreMap":395},[399,2246,2247],{"class":401,"line":402},[399,2248,2249],{"class":450},"\u003C!-- components\u002Fforms\u002FContactForm.vue -->\n",[399,2251,2252,2255,2258,2262,2265,2267,2269,2272,2274],{"class":401,"line":413},[399,2253,2254],{"class":409},"\u003C",[399,2256,2257],{"class":405},"script",[399,2259,2261],{"class":2260},"sGtlX"," setup",[399,2263,2264],{"class":2260}," lang",[399,2266,1951],{"class":409},[399,2268,850],{"class":731},[399,2270,2271],{"class":735},"ts",[399,2273,850],{"class":731},[399,2275,2276],{"class":409},">\n",[399,2278,2279,2282,2285,2288,2291,2294,2298,2300,2303,2306],{"class":401,"line":421},[399,2280,2281],{"class":640},"const",[399,2283,2284],{"class":485}," props",[399,2286,2287],{"class":699}," =",[399,2289,2290],{"class":668}," defineProps",[399,2292,2293],{"class":409},"\u003C{",[399,2295,2297],{"class":2296},"ssFBz"," iri",[399,2299,427],{"class":699},[399,2301,2302],{"class":675}," string",[399,2304,2305],{"class":409}," }>",[399,2307,1690],{"class":681},[399,2309,2310,2312,2314,2317,2319,2321,2324],{"class":401,"line":479},[399,2311,2281],{"class":640},[399,2313,1316],{"class":409},[399,2315,2316],{"class":485}," resource",[399,2318,1332],{"class":409},[399,2320,2287],{"class":699},[399,2322,2323],{"class":668}," useCwaResource",[399,2325,2326],{"class":681},"(props)\n",[399,2328,2329,2331,2334,2336,2339,2342,2344,2346,2349,2351],{"class":401,"line":505},[399,2330,2281],{"class":640},[399,2332,2333],{"class":485}," iriRef",[399,2335,2287],{"class":699},[399,2337,2338],{"class":668}," toRef",[399,2340,2341],{"class":681},"(props",[399,2343,685],{"class":409},[399,2345,1508],{"class":731},[399,2347,2348],{"class":735},"iri",[399,2350,732],{"class":731},[399,2352,751],{"class":681},[399,2354,2355,2357,2359,2362,2364,2367,2369,2372,2374,2377,2379,2381,2384],{"class":401,"line":542},[399,2356,2281],{"class":640},[399,2358,1316],{"class":409},[399,2360,2361],{"class":485}," submit",[399,2363,685],{"class":409},[399,2365,2366],{"class":485}," submitting",[399,2368,685],{"class":409},[399,2370,2371],{"class":485}," success",[399,2373,685],{"class":409},[399,2375,2376],{"class":485}," formErrors",[399,2378,1332],{"class":409},[399,2380,2287],{"class":699},[399,2382,2383],{"class":668}," useCwaForm",[399,2385,2386],{"class":681},"(iriRef)\n",[399,2388,2389],{"class":401,"line":576},[399,2390,476],{"emptyLinePlaceholder":475},[399,2392,2393,2395,2398,2400,2403,2405,2407,2409,2411,2414,2416,2419,2422,2425,2428],{"class":401,"line":610},[399,2394,2281],{"class":640},[399,2396,2397],{"class":485}," fields",[399,2399,2287],{"class":699},[399,2401,2402],{"class":668}," computed",[399,2404,672],{"class":681},[399,2406,1869],{"class":409},[399,2408,1895],{"class":640},[399,2410,2316],{"class":681},[399,2412,2413],{"class":409},".",[399,2415,1210],{"class":681},[399,2417,2418],{"class":409},"?.",[399,2420,2421],{"class":681},"formView ",[399,2423,2424],{"class":699},"??",[399,2426,2427],{"class":409}," {}",[399,2429,751],{"class":681},[399,2431,2432,2435,2437],{"class":401,"line":632},[399,2433,2434],{"class":409},"\u003C\u002F",[399,2436,2257],{"class":405},[399,2438,2276],{"class":409},[399,2440,2441],{"class":401,"line":637},[399,2442,476],{"emptyLinePlaceholder":475},[399,2444,2445,2447,2450],{"class":401,"line":653},[399,2446,2254],{"class":409},[399,2448,2449],{"class":405},"template",[399,2451,2276],{"class":409},[399,2453,2454,2457,2459,2462,2464,2466,2469,2471],{"class":401,"line":659},[399,2455,2456],{"class":409},"  \u003C",[399,2458,1267],{"class":405},[399,2460,2461],{"class":2260}," @submit.prevent",[399,2463,1951],{"class":409},[399,2465,850],{"class":731},[399,2467,2468],{"class":735},"submit",[399,2470,850],{"class":731},[399,2472,2276],{"class":409},[399,2474,2475,2478],{"class":401,"line":705},[399,2476,2477],{"class":409},"    \u003C",[399,2479,2480],{"class":405},"ContactFormField\n",[399,2482,2483,2486,2488,2490,2493],{"class":401,"line":711},[399,2484,2485],{"class":2260},"      v-for",[399,2487,1951],{"class":409},[399,2489,850],{"class":731},[399,2491,2492],{"class":735},"(field, fullName) in fields",[399,2494,871],{"class":731},[399,2496,2497,2500,2502,2504,2507],{"class":401,"line":720},[399,2498,2499],{"class":2260},"      :key",[399,2501,1951],{"class":409},[399,2503,850],{"class":731},[399,2505,2506],{"class":735},"fullName",[399,2508,871],{"class":731},[399,2510,2511,2514,2516,2518,2521],{"class":401,"line":754},[399,2512,2513],{"class":2260},"      :iri",[399,2515,1951],{"class":409},[399,2517,850],{"class":731},[399,2519,2520],{"class":735},"props.iri",[399,2522,871],{"class":731},[399,2524,2525,2528,2530,2532,2534],{"class":401,"line":781},[399,2526,2527],{"class":2260},"      :full-name",[399,2529,1951],{"class":409},[399,2531,850],{"class":731},[399,2533,2506],{"class":735},[399,2535,871],{"class":731},[399,2537,2538],{"class":401,"line":809},[399,2539,2540],{"class":409},"    \u002F>\n",[399,2542,2543],{"class":401,"line":815},[399,2544,476],{"emptyLinePlaceholder":475},[399,2546,2547,2549,2551,2554,2556,2558,2561,2563,2566,2568,2570,2573,2575,2578,2580,2582,2585,2587,2590,2593,2595,2597],{"class":401,"line":1237},[399,2548,2477],{"class":409},[399,2550,367],{"class":405},[399,2552,2553],{"class":2260}," v-for",[399,2555,1951],{"class":409},[399,2557,850],{"class":731},[399,2559,2560],{"class":735},"error in formErrors",[399,2562,850],{"class":731},[399,2564,2565],{"class":2260}," :key",[399,2567,1951],{"class":409},[399,2569,850],{"class":731},[399,2571,2572],{"class":735},"error",[399,2574,850],{"class":731},[399,2576,2577],{"class":2260}," class",[399,2579,1951],{"class":409},[399,2581,850],{"class":731},[399,2583,2584],{"class":735},"text-red-500",[399,2586,850],{"class":731},[399,2588,2589],{"class":409},">",[399,2591,2592],{"class":681},"{{ error }}",[399,2594,2434],{"class":409},[399,2596,367],{"class":405},[399,2598,2276],{"class":409},[399,2600,2601],{"class":401,"line":1250},[399,2602,476],{"emptyLinePlaceholder":475},[399,2604,2605,2607,2610,2613,2615,2617,2619,2621,2624,2626,2628,2631,2633],{"class":401,"line":1293},[399,2606,2477],{"class":409},[399,2608,2609],{"class":405},"button",[399,2611,2612],{"class":2260}," type",[399,2614,1951],{"class":409},[399,2616,850],{"class":731},[399,2618,2468],{"class":735},[399,2620,850],{"class":731},[399,2622,2623],{"class":2260}," :disabled",[399,2625,1951],{"class":409},[399,2627,850],{"class":731},[399,2629,2630],{"class":735},"submitting",[399,2632,850],{"class":731},[399,2634,2276],{"class":409},[399,2636,2637],{"class":401,"line":1299},[399,2638,2639],{"class":681},"      {{ submitting ? 'Sending…' : 'Submit' }}\n",[399,2641,2642,2645,2647],{"class":401,"line":1305},[399,2643,2644],{"class":409},"    \u003C\u002F",[399,2646,2609],{"class":405},[399,2648,2276],{"class":409},[399,2650,2651],{"class":401,"line":1338},[399,2652,476],{"emptyLinePlaceholder":475},[399,2654,2655,2657,2659,2662,2664,2666,2669,2671,2673,2676,2678,2680],{"class":401,"line":1368},[399,2656,2477],{"class":409},[399,2658,367],{"class":405},[399,2660,2661],{"class":2260}," v-if",[399,2663,1951],{"class":409},[399,2665,850],{"class":731},[399,2667,2668],{"class":735},"success",[399,2670,850],{"class":731},[399,2672,2589],{"class":409},[399,2674,2675],{"class":681},"Sent!",[399,2677,2434],{"class":409},[399,2679,367],{"class":405},[399,2681,2276],{"class":409},[399,2683,2684,2687,2689],{"class":401,"line":1374},[399,2685,2686],{"class":409},"  \u003C\u002F",[399,2688,1267],{"class":405},[399,2690,2276],{"class":409},[399,2692,2693,2695,2697],{"class":401,"line":1379},[399,2694,2434],{"class":409},[399,2696,2449],{"class":405},[399,2698,2276],{"class":409},[390,2700,2702],{"className":2240,"code":2701,"language":2242,"meta":395,"style":395},"\u003C!-- components\u002Fforms\u002FContactFormField.vue -->\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ iri: string; fullName: string }>()\nconst { value, vars, errors, displayErrors, onBlur, onInput } = useCwaFormInput(\n  toRef(props, 'iri'),\n  props.fullName\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Clabel :for=\"props.fullName\">{{ vars?.label }}\u003C\u002Flabel>\n    \u003Cinput :id=\"props.fullName\" v-model=\"value\" v-bind=\"vars?.attr\" @blur=\"onBlur\" @input=\"onInput\" \u002F>\n    \u003Cul v-if=\"displayErrors && errors.length\">\n      \u003Cli v-for=\"error in errors\" :key=\"error\" class=\"text-red-500\">{{ error }}\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[371,2703,2704,2709,2729,2761,2805,2824,2834,2838,2846,2850,2858,2867,2897,2965,2984,3032,3040,3048],{"__ignoreMap":395},[399,2705,2706],{"class":401,"line":402},[399,2707,2708],{"class":450},"\u003C!-- components\u002Fforms\u002FContactFormField.vue -->\n",[399,2710,2711,2713,2715,2717,2719,2721,2723,2725,2727],{"class":401,"line":413},[399,2712,2254],{"class":409},[399,2714,2257],{"class":405},[399,2716,2261],{"class":2260},[399,2718,2264],{"class":2260},[399,2720,1951],{"class":409},[399,2722,850],{"class":731},[399,2724,2271],{"class":735},[399,2726,850],{"class":731},[399,2728,2276],{"class":409},[399,2730,2731,2733,2735,2737,2739,2741,2743,2745,2747,2750,2753,2755,2757,2759],{"class":401,"line":421},[399,2732,2281],{"class":640},[399,2734,2284],{"class":485},[399,2736,2287],{"class":699},[399,2738,2290],{"class":668},[399,2740,2293],{"class":409},[399,2742,2297],{"class":2296},[399,2744,427],{"class":699},[399,2746,2302],{"class":675},[399,2748,2749],{"class":409},";",[399,2751,2752],{"class":2296}," fullName",[399,2754,427],{"class":699},[399,2756,2302],{"class":675},[399,2758,2305],{"class":409},[399,2760,1690],{"class":681},[399,2762,2763,2765,2767,2770,2772,2775,2777,2780,2782,2785,2787,2790,2792,2795,2797,2799,2802],{"class":401,"line":479},[399,2764,2281],{"class":640},[399,2766,1316],{"class":409},[399,2768,2769],{"class":485}," value",[399,2771,685],{"class":409},[399,2773,2774],{"class":485}," vars",[399,2776,685],{"class":409},[399,2778,2779],{"class":485}," errors",[399,2781,685],{"class":409},[399,2783,2784],{"class":485}," displayErrors",[399,2786,685],{"class":409},[399,2788,2789],{"class":485}," onBlur",[399,2791,685],{"class":409},[399,2793,2794],{"class":485}," onInput",[399,2796,1332],{"class":409},[399,2798,2287],{"class":699},[399,2800,2801],{"class":668}," useCwaFormInput",[399,2803,2804],{"class":681},"(\n",[399,2806,2807,2810,2812,2814,2816,2818,2820,2822],{"class":401,"line":505},[399,2808,2809],{"class":668},"  toRef",[399,2811,2341],{"class":681},[399,2813,685],{"class":409},[399,2815,1508],{"class":731},[399,2817,2348],{"class":735},[399,2819,732],{"class":731},[399,2821,696],{"class":681},[399,2823,964],{"class":409},[399,2825,2826,2829,2831],{"class":401,"line":542},[399,2827,2828],{"class":681},"  props",[399,2830,2413],{"class":409},[399,2832,2833],{"class":681},"fullName\n",[399,2835,2836],{"class":401,"line":576},[399,2837,751],{"class":681},[399,2839,2840,2842,2844],{"class":401,"line":610},[399,2841,2434],{"class":409},[399,2843,2257],{"class":405},[399,2845,2276],{"class":409},[399,2847,2848],{"class":401,"line":632},[399,2849,476],{"emptyLinePlaceholder":475},[399,2851,2852,2854,2856],{"class":401,"line":637},[399,2853,2254],{"class":409},[399,2855,2449],{"class":405},[399,2857,2276],{"class":409},[399,2859,2860,2862,2865],{"class":401,"line":653},[399,2861,2456],{"class":409},[399,2863,2864],{"class":405},"div",[399,2866,2276],{"class":409},[399,2868,2869,2871,2874,2877,2879,2881,2884,2886,2888,2891,2893,2895],{"class":401,"line":659},[399,2870,2477],{"class":409},[399,2872,2873],{"class":405},"label",[399,2875,2876],{"class":2260}," :for",[399,2878,1951],{"class":409},[399,2880,850],{"class":731},[399,2882,2883],{"class":735},"props.fullName",[399,2885,850],{"class":731},[399,2887,2589],{"class":409},[399,2889,2890],{"class":681},"{{ vars?.label }}",[399,2892,2434],{"class":409},[399,2894,2873],{"class":405},[399,2896,2276],{"class":409},[399,2898,2899,2901,2904,2907,2909,2911,2913,2915,2918,2920,2922,2924,2926,2929,2931,2933,2936,2938,2941,2943,2945,2948,2950,2953,2955,2957,2960,2962],{"class":401,"line":705},[399,2900,2477],{"class":409},[399,2902,2903],{"class":405},"input",[399,2905,2906],{"class":2260}," :id",[399,2908,1951],{"class":409},[399,2910,850],{"class":731},[399,2912,2883],{"class":735},[399,2914,850],{"class":731},[399,2916,2917],{"class":2260}," v-model",[399,2919,1951],{"class":409},[399,2921,850],{"class":731},[399,2923,1210],{"class":735},[399,2925,850],{"class":731},[399,2927,2928],{"class":2260}," v-bind",[399,2930,1951],{"class":409},[399,2932,850],{"class":731},[399,2934,2935],{"class":735},"vars?.attr",[399,2937,850],{"class":731},[399,2939,2940],{"class":2260}," @blur",[399,2942,1951],{"class":409},[399,2944,850],{"class":731},[399,2946,2947],{"class":735},"onBlur",[399,2949,850],{"class":731},[399,2951,2952],{"class":2260}," @input",[399,2954,1951],{"class":409},[399,2956,850],{"class":731},[399,2958,2959],{"class":735},"onInput",[399,2961,850],{"class":731},[399,2963,2964],{"class":409}," \u002F>\n",[399,2966,2967,2969,2971,2973,2975,2977,2980,2982],{"class":401,"line":711},[399,2968,2477],{"class":409},[399,2970,2200],{"class":405},[399,2972,2661],{"class":2260},[399,2974,1951],{"class":409},[399,2976,850],{"class":731},[399,2978,2979],{"class":735},"displayErrors && errors.length",[399,2981,850],{"class":731},[399,2983,2276],{"class":409},[399,2985,2986,2989,2991,2993,2995,2997,3000,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024,3026,3028,3030],{"class":401,"line":720},[399,2987,2988],{"class":409},"      \u003C",[399,2990,2203],{"class":405},[399,2992,2553],{"class":2260},[399,2994,1951],{"class":409},[399,2996,850],{"class":731},[399,2998,2999],{"class":735},"error in errors",[399,3001,850],{"class":731},[399,3003,2565],{"class":2260},[399,3005,1951],{"class":409},[399,3007,850],{"class":731},[399,3009,2572],{"class":735},[399,3011,850],{"class":731},[399,3013,2577],{"class":2260},[399,3015,1951],{"class":409},[399,3017,850],{"class":731},[399,3019,2584],{"class":735},[399,3021,850],{"class":731},[399,3023,2589],{"class":409},[399,3025,2592],{"class":681},[399,3027,2434],{"class":409},[399,3029,2203],{"class":405},[399,3031,2276],{"class":409},[399,3033,3034,3036,3038],{"class":401,"line":754},[399,3035,2644],{"class":409},[399,3037,2200],{"class":405},[399,3039,2276],{"class":409},[399,3041,3042,3044,3046],{"class":401,"line":781},[399,3043,2686],{"class":409},[399,3045,2864],{"class":405},[399,3047,2276],{"class":409},[399,3049,3050,3052,3054],{"class":401,"line":809},[399,3051,2434],{"class":409},[399,3053,2449],{"class":405},[399,3055,2276],{"class":409},[2221,3057,3059],{"id":3058},"validation-behaviour","Validation behaviour",[2200,3061,3062,3079,3089],{},[2203,3063,3064,3067,3068,3070,3071,3073,3074,2062,3076,3078],{},[1406,3065,3066],{},"PATCH forms"," — each field validates in real time: ",[371,3069,2959],{}," debounces 300 ms then PATCHes the field value to the submit endpoint. The API returns updated ",[371,3072,1011],{}," with per-field errors; ",[371,3075,1058],{},[371,3077,1026],{}," update reactively.",[2203,3080,3081,3084,3085,3088],{},[1406,3082,3083],{},"POST forms"," — ",[371,3086,3087],{},"validate()"," is a no-op; errors only surface on full submission.",[2203,3090,3091,3084,3094,3097,3098,3101],{},[1406,3092,3093],{},"Error display",[371,3095,3096],{},"displayErrors"," is ",[371,3099,3100],{},"false"," until the user blurs the field, the field regresses from valid, or the form is submitted and fails. This prevents error flash on first render.",[2221,3103,3105],{"id":3104},"request-body-format","Request body format",[367,3107,3108,3109,3111],{},"Both PATCH validation and POST\u002FPATCH submission use Symfony ",[371,3110,1170],{}," keys:",[390,3113,3115],{"className":830,"code":3114,"language":832,"meta":395,"style":395},"{ \"contact_form[name]\": \"Alice\", \"contact_form[email]\": \"alice@example.com\" }\n",[371,3116,3117],{"__ignoreMap":395},[399,3118,3119,3122,3124,3127,3129,3131,3133,3136,3138,3140,3142,3145,3147,3149,3151,3154,3156],{"class":401,"line":402},[399,3120,3121],{"class":409},"{",[399,3123,855],{"class":489},[399,3125,3126],{"class":846},"contact_form[name]",[399,3128,850],{"class":489},[399,3130,427],{"class":409},[399,3132,855],{"class":731},[399,3134,3135],{"class":735},"Alice",[399,3137,850],{"class":731},[399,3139,685],{"class":409},[399,3141,855],{"class":489},[399,3143,3144],{"class":846},"contact_form[email]",[399,3146,850],{"class":489},[399,3148,427],{"class":409},[399,3150,855],{"class":731},[399,3152,3153],{"class":735},"alice@example.com",[399,3155,850],{"class":731},[399,3157,1365],{"class":409},[367,3159,3160,3161,3164,3165,3168,3169,2413],{},"The root key (",[371,3162,3163],{},"contact_form",") is derived by stripping ",[371,3166,3167],{},"[...]"," from the first ",[371,3170,1170],{},[3172,3173,3174],"style",{},"html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .swWMF, html code.shiki .swWMF{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}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 .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .stmX-, html code.shiki .stmX-{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F78C6C}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sn4go, html code.shiki .sn4go{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#89DDFF}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sBtbT, html code.shiki .sBtbT{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#89DDFF}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sbW4m, html code.shiki .sbW4m{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#FFCB6B}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .sphPO, html code.shiki .sphPO{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#C792EA}html pre.shiki code .scSvc, html code.shiki .scSvc{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}html pre.shiki code .sadgS, html code.shiki .sadgS{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#F07178}html pre.shiki code .sErdZ, html code.shiki .sErdZ{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#916B53}html pre.shiki code .s3Ny6, html code.shiki .s3Ny6{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#82AAFF}html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .ssFBz, html code.shiki .ssFBz{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#F07178}",{"title":395,"searchDepth":413,"depth":413,"links":3176},[3177,3178,3179,3180,3181,3182,3183,3184,3185],{"id":384,"depth":413,"text":385},{"id":434,"depth":413,"text":435},{"id":821,"depth":413,"text":822},{"id":923,"depth":413,"text":924},{"id":1398,"depth":413,"text":1399},{"id":1447,"depth":413,"text":1448},{"id":1556,"depth":413,"text":1557},{"id":2052,"depth":413,"text":2053},{"id":2194,"depth":413,"text":2195,"children":3186},[3187,3188,3189],{"id":2223,"depth":421,"text":2224},{"id":3058,"depth":421,"text":3059},{"id":3104,"depth":421,"text":3105},"Render Symfony form types via the API, handle validation field-by-field, and process submissions with FormSuccessEvent.","md",null,{},{"title":113,"description":3190},"DetxhymkdugKxzB20tCmOZk44uScups7l0vAVBltc8c",[3197,3199],{"title":109,"path":110,"stem":111,"description":3198,"children":-1},"The built-in Collection resource for rendering paginated lists of other API resources as a CWA component.",{"title":117,"path":118,"stem":119,"description":3200,"children":-1},"Build blogs, event listings, and multi-level page hierarchies using AbstractPageData and nested Page relationships.",1782512899961]