I want to use the form framework with vue.js. Instead of rendering with fluid, I prepare and assign the form elements as a json object, which vue loads async from my API controller. My basic implementation of a single text field works so far, but "formstate->getFormValues()" remains empty. So I guess, the binding between my form and the request fails.
The following example is just the basic principle:
Controller: Prepare form fields as array and return json to the requesting frontend application
class FormFrontendApiController extends FormFrontendController
{
public function renderAction(): ResponseInterface
{
$persistenceIdentifier = 'EXT:test/Resources/Private/FormDefinitions/test.form.yaml';
$formConfiguration = $this->formPersistenceManager->load($persistenceIdentifier);
$factory = GeneralUtility::makeInstance(ArrayFormFactory::class);
$formDefinition = $factory->build($formConfiguration);
$formDefinition->setIdentifier($formDefinition->getIdentifier());
$formRuntime = GeneralUtility::makeInstance(HeadlessFormRuntime::class);
$formRuntime->setFormDefinition($formDefinition);
$formRuntime->setRequest($this->request);
$formRuntime->initialize();
$formState = $formRuntime->getFormState();
$finisherResponse = $formRuntime->run();
$elements = $formRuntime->getFormDefinition()->getElements();
$hashService = GeneralUtility::makeInstance(HashService::class);
$stateHash = $hashService->appendHmac(base64_encode(serialize($formState)));
$currentPageIndex = $formRuntime->getCurrentPage() ? $formRuntime->getCurrentPage()->getIndex() : 0;
$currentPageId = $currentPageIndex + 1;
$elements = $formDefinition->getPageByIndex($currentPageIndex)->getElements();
$requestHash = $this->mvcPropertyMappingConfigurationService->generateTrustedPropertiesToken(
['tx_form_formframework[test][text-1]', 'tx_form_formframework[test][__currentPage]'],
'tx_form_formframework'
);
$formFields = [
[
'type' => 'Hidden',
'name' => sprintf('tx_form_formframework[%s][__state]', $formDefinition->getIdentifier()),
'defaultValue' => $stateHash
],
[
'type' => 'Hidden',
'name' => 'tx_form_formframework[__trustedProperties]',
'defaultValue' => $requestHash
],
[
'type' => 'Hidden',
'name' => sprintf('tx_form_formframework[%s][__currentPage]', $formDefinition->getIdentifier()),
'defaultValue' => $currentPageId
]
];
$formDefinition->setRenderingOption('controllerAction', 'perform');
return $this->jsonResponse(json_encode($formFields));
}
}
The rendered frontend contains the following necessary form fields:
<input type="hidden"
name="tx_form_formframework[test][__state]"
value="TzozOToiVFlQTzNcQ01TXEZvcm1cRG9tYWluXFJ1bnRpbWVcRm9ybVN0YXRlIjoyOntzOjI1OiIAKgBsYXN0RGlzcGxheWVkUGFnZUluZGV4IjtpOjA7czoxMzoiACoAZm9ybVZhbHVlcyI7YTowOnt9fQ==aa9f11798f986845c2e54234794c5197446d74dc" />
<input type="hidden"
name="tx_form_formframework[__trustedProperties]"
value="{"test":{"text-1":1,"__currentPage":1}}6a81fd31dfb7f29c51873b39ff18544e45c4d7ba" />
<input class=" o-form-field__input"
id="aPIFormular-101-text-1"
type="text"
name="tx_form_formframework[test][text-1]" value="" />
<input type="hidden" name="tx_form_formframework[test][__currentPage]" value="1" />
To test, I just submit the form back to the controller, as a basic post request (no JavaScript fetch).
- debug($formState->isFormSubmitted()) returns true
- debug($formState->getFormValues()) remains empty
Question: Is it possible to use the form framework in this way or will I run into huge problems / efforts?