The default form field names generated by
Symfony2's FormBuilder appear to not work work with
AngularJS' form validation and directives like ng-show, unless one is proficient in Javascript, to deduce other syntatical options. The reason is that all the documentation examples for AngularJS expressions use Javascript's dot object notation, which can be confusing about what's really going on. A skilled JS reader might guess the answer to this issue before the end of this post. Judging by the amount of trouble people have had with this issue on various forums, the answer might not be so obvious. It had me stumped for a while.
So the conventional way to generate a HTML form via Symfony2 is:
In a Symfony Controller, generate the form:
class MyController extends Controller {
/**
* @Route("/")
* @Method("GET")
* @Template
*/
public function indexAction() {
$myEntity = new MyEntity();
$form = $this->createForm(new MyEntityType(), $myEntity);
return array("form" => $form->createView());
}
}
Using the following entity (Doctrine) class:
class MyEntity {
...
/**
* @var string
*
* @Assert\NotBlank(message="Please provide a contact name")
* @ORM\Column(name="contactName", type="string", length=50)
*/
private $contactName;
}
Using the following type for form building:
class MyEntityType extends AbstractType {
...
public function getName() {
return 'myEntityType';
}
}
Using the form.name variable in a template (ie: <form name="{{ form.name }}">) we get something like this (yes I'm using
Twitter Bootstrap in my project):
<div class="controls controls-row">
<input id="myEntityType_contactName" class="ng-pristine ng-invalid ng-invalid-required" type="text"
ng-model="myEntity.contactName" maxlength="50" required="required" name="myEntityType[contactName]">
<span ng-show="myEntityType.myEntityType[contactName].$error.required" style="display: none;">
</div>
I wrote some
Twig code to add the ng directives to the generated HTML. Those blocks use the form values generated by the builder. For example, Symfony renders the
name attribute on the <input> tag and my extension code uses the same name string as part of the
ng-show generation.
If one enters/deletes text the <span> is not shown/hidden.
Doing some research, I found some StackOverflow posts Symfony2 Form Component - creating fields without the forms name in the name attribute and Symfony2.1 using form with method GET. If we follow their advice and change MyEntityType to have getName() return an empty string, the resulting HTML is:
<div class="controls controls-row">
<input id="contactName" class="ng-pristine ng-invalid ng-invalid-required" type="text" ng-model="myEntity.contactName"
maxlength="50" required="required" name="contactName">
<span ng-show="formName.contactName.$error.required" style="">
</div>
Of course I had to manually give the form a name in the template ie: <form name="formName">
As pointed out in the first StackOverflow post above; it's the formatting of the name in Symfony/Component/Form/Extension/Core/Type/FieldType.php (or Symfony/Component/Form/Extension/Core/Type/BaseType.php if you're on Symfony 2.3) that's causing the problem.
I did not like those suggestions for a solution, but it did help me narrow down what was going on. I did not like the idea clobbering how Symfony generates forms, because we were having to adapt our server code (by altering the getName() method to deal with a client side technology issue. To me that seems wrong.
The reason that the field name was causing problems, is that AngularJS evaulates the string contents of the ng-show attribute as an expression, and in ng expressions, you can use square brackets to create arrays/objects. Consquently the square brackets that Symfony uses in the field name causes expession evaulation issues in AngularJS.
The solution is to use Javascript's property style accessors for objects (square brackets) over the dot object notation.. Thus we can have the square brackets in a string and there is no evalation issue.
<div class="controls controls-row">
<input id="myEntityType_contactName" class="ng-pristine ng-invalid ng-invalid-required" type="text"
ng-model="myEntity.contactName" maxlength="50" required="required" name="myEntityType[contactName]">
<span ng-show="myEntityType['myEntityType[contactName]'].$error.required" style="display: none;">
</div>
It all works. Just had to update my Twig code to generate the correct JS notation.
Alas, I can't take credit for the correct solution as someone else reported it as an issue against AngularJS. I guess that we think about, and write our code in one particular style for so long, that we forget about alternatives. However this post helps pull together a variety of threads about this topic, so hopefully the next person who has the problem just has to read this blog post.
