symfony2 embedded collection form dynamically create new entities

Question

I have 2 entities...

Contract (id, clientName, contractCities)
ContractCity (id, name)

Contract has a oneToMany relationship with ContractCities

oneToMany:
  contractCities:
    targetEntity: ContractCity
    mappedBy: contract
    cascade: [persist, remove]

ContractCities a manyToOne association with a Contract

manyToOne:
  contract:
    targetEntity: Contract
    inversedBy: contractCities
    joinColumn:
      name: contract_id
      referencedColumnName: id

When editing/creating the Contract I would like to be able to dynamically add new cities (beyond the minimun requirement of 3). I've attempted to follow the Symfony2 embedded forms cookbook Here

ContractType Form

->add('contractCities', 'collection', array(
            'type' => new ContractCityType(),
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' => false
            ))

section of Twig template to display cities form

 <ul class="contractCities" data-prototype="{{ form_widget(form.contractCities.vars.prototype)|e }}">
    {% for city in form.contractCities %}
    <li>
        {{ form_label(city, loop.index) }}
        {{ form_widget(city.name, {'attr': {'placeholder' : 'City, State'} }) }}
    </li>
    {% endfor %}
    </ul>

Some Controller Code to ensure at least 3 city fields

  $cityCount = count($contract->getContractCities());
    if($cityCount <3) {
        $needCities = 3 - $cityCount;

        for($i=0; $i<$needCities; $i++){
            $city = new ContractCity();
            $city->setContract($contract);
            $contract->addContractCity($city);
            }
    }





    $form = $this->createForm(new ContractType, $contract);

    $form->handleRequest($request);

    if($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($contract);


        $em->flush();
        $id = $contract->getId();
        return $this->redirect($this->generateUrl('Intranet_contract_edit', array('id'=>$id)));
    }

When I click my 'New City' link that shows up at the bottom of the list, I get a new form field, and can Input the city name. However, on submit nothing seems to happen. I can edit the existing cities and the changes are saved, but any new cities i have added vanish.

My understanding is that Contract->AddCity or ->AddContractCity or something of that nature should be called, but that does not appear to happen. Any idea what I am doing wrong?

UPDATE: When I submit the form I do not see the additional cities showing up in the POST data, headed to google...

SOLVED: While looking at the source code using the chrome 'inspect element' on one of the prototype fields, I noticed that it showed the forms closing tag was rendered prematurely (though it looked fine when using view source). I was using form_start and form_end, but they were in different divs (twitter bootstrap "rows"). It seemed like the form closing tag was being auto rendered right before the closing tag of the div that contained the form_start. I moved the form_start and form_end so that they were the outer most elements of my view (putting them in the same "container" div) and everything is working fine now. Wtf.

Screenshot visual aide: http://imgur.com/hrgOV9T

Answer 1

SOLVED: While looking at the source code using the chrome 'inspect element' on one of the prototype fields, I noticed that it showed the forms closing tag was rendered prematurely (though it looked fine when using view source). I was using form_start and form_end, but they were in different divs (twitter bootstrap "rows"). It seemed like the form closing tag was being auto rendered right before the closing tag of the div that contained the form_start. I moved the form_start and form_end so that they were the outer most elements of my view (putting them in the same "container" div) and everything is working fine now. Wtf.

Screenshot visual aide: http://imgur.com/hrgOV9T