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