Using Angular.js together with Symfony 2 form

Question

I have a simple edit form built with Symfony2 form component. Which means that this form will be populated with model data in my php controller.

But each form inputs has associated an ng-model directive. Now here is the problem I'm facing:

When entering on the edit form the input are empty of values(because they weren't initialized in angular controller), however if i check with firebug they will have the value attribute set with the appropriate data(because the data was set in the php controller).

Is there a way somehow to also initialize the angular models?

Answer 1

This is not a direct answer to the question but rather some comments on using AngularJS and Symfony 2 (S2).

AngularJS really wants to take control of your browser and act as a single page application. It wants the server to passively serve up templates, images etc. It want to transfer chunks of data via json.

The S2 view component really want to generate it's own html via twig. It's based on having a dumb browser that can only render what is sent (complete html pages).

Twig is not over compatible with AngularJS templates especially since they both use curly brackets.

The S2 form html generator adds an additional layer of complexity since it want to control the input element naming to allow mapping posted data back to objects. AngularJS wants to use it's own form elements and json.

I let each do what it does best. I only have one S2 twig template which is the main entry point to the application. The template serves up the javascripts needed to get AngularJS going.

I then let AngularJS request partial templates formatted the way AngularJS want to see them. S2 does not process the partials and never sees them.

S2 is used to implement a REST like web api. It fetches data and serves it as json. The JMSSerializer package comes in handy here. AngularJS controllers take care of handling the data on the browser side and mapping it to the AngularJS forms.

The missing pieces of the puzzle is using the S2 form component for validation. At present, I don't use the form component at all. The serializer helps me to map json data onto my objects (replaces the $form->handleRequest functionality) and then calls the validator directly (replaces the formIsValid).

It works reasonably well though I do miss the form component sometimes. Being able to easily reuse form types is nice.

I'd really like to have the S2 form component be able to process json directly. Which it probably can be made to do. Just need to dig into it more.

===============================================

Here is an example of a AngularJS form mapped to a AngularJS model

<form name="form" novalidate class="simple-form css-form">
ID: {{ person.id }}<br />

Full Name:  <input type="text"  ng-model="person.name_full"  name="person_name_full" required /><br />
<div ng-show="form.person_name_full.$dirty && form.person_name_full.$invalid">Invalid:
    <span ng-show="form.person_name_full.$error.required">Full Name is required.</span>
</div>

First Name: <input type="text"  ng-model="person.name_first" /><br />
Last Name:  <input type="text"  ng-model="person.name_last"  /><br />

Email: <input type="email" ng-model="person.email" name="person_email" required /><br />
<div ng-show="form.person_email.$dirty && form.person_email.$invalid">Invalid:
    <span ng-show="form.person_email.$error.required">Email is required.</span>
    <span ng-show="form.person_email.$error.email">This is not a valid email.</span>
</div>

The big challenge with using twig to generate this is the element name property. Dumb html forms cannot be nested and require each name to be unique. This, S2 implements it's own rather verbose naming convention which is partially based on element order and thus difficult to predict.

AngularJS needs the names to deal with client side validation which in turn can make your application more responsive and use less bandwidth.

S2 needs the names to do server side validation. It's a basic conflict.

AngularJS supported nested forms and nested json data. So we can keep the names simple.

This is why I don't think the current S2 form component plays nicely with AngularJS. And why having a S2 form component that does support AngularJS would be great.