[Symfony/AngularJS] Forms
Als doorgang op mijn vorige topic een volgende vraag over een probleem waar ik op ben gestuit. Ik schrijf een app met Angularjs en Symfony, waarbij ik de forms door Twig laat renderen en dan als template in Angular gebruik.
Bij het submitten stuit ik echter op een probleem. Ik wil de formulier input graag als json terugsturen naar de verantwoordelijke controller. In mijn twig form template heb ik de volgende regels toegevoegd:
Quote:
{% set ng_model = "formData['" ~ id ~ "']" %}
ng-model="{{ ng_model }}"
ng-model="{{ ng_model }}"
Elke input element krijgt dit attribuut dus mee, wat ik in de javascript controller kan gebruiken. Dit ziet er dan bijvoorbeeld zo uit: '<input ng-model="formData['relation[name]']" .../>'. Nu moet ik echter als ik dit werkend wil hebben, het formulier als application/x-www-form-urlencoded submitten met de bijgevoegde data, niet de ideale oplossing.
Wat ik wil is dat het zo wordt: '<input ng-model="formData['relation']['name']" .../>', waardoor ik de data makkelijker kan opsturen in Angular. Ik heb hier al even mee zitten spelen maar ben niet handig genoeg in Twig om dit makkelijk op te lossen, en ik vraag me af hoe andere mensen dit hebben gedaan.
Groet,
Remco
Gewijzigd op 06/01/2016 19:57:31 door Remco P
Zelf submit ik nooit een formulier o.i.d
Veel mensen lossen dit op door de scope model data op te sturen als formdata in Angular, maar ik wil het gewoon als JSON sturen. Maar dan krijg je dus het probleem dat je incorrecte JSON gaat sturen als je de standaard input names aanhoudt en Symfony je form niet kan processen.
Heb het iig nu opgelost door een Twig function te schrijven die een form name als "relation[name]" omzet naar "formData['relation']['name']" zodat je in je Angular controller gewoon een valide JSON array kan sturen.
Daar kan je het weer decoden.
Ik ben zelf pas begonnen aan een nieuwe app, en heb het zelf zo aangepakt.
Op het werk sturen we op die manier ook json door via de url.
Gewijzigd op 07/01/2016 16:53:16 door Randy vsf
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
public function formModelName ($ctrlVar, $inputName)
{
// divide form name from input name
$inputExpl = explode ('[', $inputName, 2);
$formName = $inputExpl [0];
$inputName = substr ($inputName, strlen ($formName));
// add surrounding "'"
$retVal = $ctrlVar . "['" . $formName . "']";
$retVal .= preg_replace_callback ('$\[(\D+)\]$', function ($matches) {
return "['" . $matches [1] . "']";
}, $inputName);
return $retVal;
}
public function formModelName ($ctrlVar, $inputName)
{
// divide form name from input name
$inputExpl = explode ('[', $inputName, 2);
$formName = $inputExpl [0];
$inputName = substr ($inputName, strlen ($formName));
// add surrounding "'"
$retVal = $ctrlVar . "['" . $formName . "']";
$retVal .= preg_replace_callback ('$\[(\D+)\]$', function ($matches) {
return "['" . $matches [1] . "']";
}, $inputName);
return $retVal;
}
Gewijzigd op 07/01/2016 17:01:57 door Remco P
En leg eens uit wat precies de bedoeling is.
Voorbeeld met service
Enige verschil is dat je niet met this.formData werkt maar met $scope.formData.
En zoals je ziet kan ik het ook aanroepen met $scope.formData['persoonlijk']['naam'].
Die service kan dus ook gevuld worden met objecten die vanuit de backend komen.
Gewijzigd op 07/01/2016 21:12:25 door Randy vsf
Maar dit werkte dus niet, omdat Symfony een form verwacht als POST met bijbehorende header en data urlencoded in de body, terwijl Angular een POST doet als json met json array in de body. Dit was dus het eerste probleem, wat ik tackelde door in Twig elke input een ng-model mee gaf. Alleen dan krijg je dus een json array met scheve waardes waarop ik dus die extensie heb geschreven. Niet echt een ideale oplossing.
Heb er uiteindelijk voor gekozen om Twig helemaal buitenspel te zetten, ook aangezien ik sommige EntityType velden wil laten autocompleten en dit niet allemaal soepel werkt.