Bonjour,
J'essaie actuellement de valider un formulaire pour une entité Tutorial en me servant d'AngularJS et Symfony2 mais j'ai des soucis de routage.
Voici tout d'abord le routage basique Symfony 2 :
Voici les actions du controller pour l'entité Tutorial :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 my_site_tutorials: path: /tutorials/ defaults: { _controller: MyBundle:Tutorial:index } methods: [GET] my_site_tutorials_show: path: /tutorials/{id} defaults: { _controller: MyBundle:Tutorial:show } methods: [GET] requirements: id: \d+ my_site_tutorials_new: path: /tutorials/new defaults: { _controller: MyBundle:Tutorial:new } methods: [GET] my_site_tutorials_create: path: /tutorials/create defaults: { _controller: MyBundle:Tutorial:create } methods: [POST]
Dans la vue maintenant, j'ai mon formulaire avec un binding angular :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 public function newAction() { $tutorial = new Tutorial(); $form = $this->createForm(TutorialType::class, $tutorial, array('action' => $this->generateUrl('my_site_tutorials_create'))); return $this->render('MyBundle:Tutorial:new.html.twig', array('tutorial' => $tutorial, 'form' => $form->createView())); } public function createAction(Request $request) { $tutorial = new Tutorial(); $form = $this->createForm(TutorialType::class, $tutorial, array('action' => $this->generateUrl('my_site_tutorials_create'))); $form->handleRequest($request); if ($form->isValid()) { $em = $this->getDoctrine()->getManager(); $em->persist($tutorial); $em->flush(); $request->getSession()->getFlashBag()->add('notice', 'Tutorial created.'); return $this->redirect($this->generateUrl('my_site_tutorials_show', array('id' => $tutorial->getId()))); } return $this->render('MyBundle:Tutorial:new.html.twig', array('tutorial' => $tutorial, 'form' => $form->createView())); }
Et enfin, voici mon fichier angular :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <div class="row"> <div id="content" class="col-md-9" ng-controller="FormController"> {{ form_start(form, {'attr': {'id': 'registerForm'}}) }} {{ form_row(form.title, {'attr': {'ng-model':'formData.title'}}) }} {{ form_row(form.description, {'attr': {'ng-model':'formData.description'}}) }} <input type="submit" value="Save" ng-click="submitForm()" /></div> {{ form_end(form) }} </div> </div>
Lors de la validation du formulaire sur la page /tutorials/new, je suis redirigé sur la page show car l'action create du TutorialController est appelée et redirige vers cette vue.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 var app = angular.module("app", ['ngRoute']); app.config(['$locationProvider', function($locationProvider){ $locationProvider.html5Mode(true).hashPrefix('!'); }]); app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/tutorials',{ templateUrl: "Tutorial/index.html.twig", controller: "TutorialController" }) .otherwise({ redirectTo: "/tutorials" }); }]); app.controller("FormController", function($scope, $http) { $scope.formData = {title: "", description: ""}; $scope.submitForm = function() { $http({ method: 'POST', url: 'my_site_tutorials_create', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, data: JSON.stringify($scope.formData) }) .success(function(formData) { $scope.hello = formData.title; }) .error(function(formData) { //$log.error(formData); }); }; });
Si j'enlève dans la méthode createForm de l'action new la redirection vers l'action create, rien ne se passe à la soumission d'un formulaire.
Comment faire alors pour que le routage angularJS prenne la main ?
Merci d'avance .
Partager