Candidate.php

<?php

namespace AppBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Doctrine\Common\Collections\ArrayCollection;
use Symfony\Component\HttpFoundation\File\UploadedFile;
use Symfony\Component\Validator\Constraints as Assert;

/**
 * Candidate
 *
 * @ORM\Table(name="candidate")
 * @ORM\Entity(repositoryClass="AppBundle\Repository\CandidateRepository")
 * @ORM\HasLifecycleCallbacks
 */
class Candidate {

    /**
     * @var int
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

    /**
     * @ORM\ManyToMany(targetEntity="CandidateContacts", cascade={"persist", "remove"}, orphanRemoval=true)
     * @ORM\JoinTable(name="candidates_contacts",
     *      joinColumns={@ORM\JoinColumn(name="candidate_id", referencedColumnName="id", onDelete="CASCADE")},
     *      inverseJoinColumns={@ORM\JoinColumn(name="candidate_contacts_id", referencedColumnName="id", unique=true, onDelete="CASCADE")}
     *      )
     */
    private $contacts;

    public function __construct() {
        $this->contacts = new ArrayCollection();
    }

    /**
     * Get id
     *
     * @return integer 
     */
    public function getId() {
        return $this->id;
    }
    
    /**
     * Add contacts
     *
     * @param \AppBundle\Entity\CandidateContacts $contacts
     * @return Candidate
     */
    public function addContact(\AppBundle\Entity\CandidateContacts $contacts) {
        $this->contacts[] = $contacts;

        return $this;
    }

    /**
     * Remove contacts
     *
     * @param \AppBundle\Entity\CandidateContacts $contacts
     */
    public function removeContact(\AppBundle\Entity\CandidateContacts $contacts) {
        $this->contacts->removeElement($contacts);
    }

    /**
     * Get contacts
     *
     * @return \Doctrine\Common\Collections\Collection 
     */
    public function getContacts() {
        return $this->contacts;
    }
}

CandidateType.php

<?php

namespace AppBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class CandidateType extends AbstractType {

    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
                ->add('contacts', 'collection', array(
                    'type' => new $options['candidate_contacts_form'],
                    'allow_add' => true,
                    'allow_delete' => true,
                    'by_reference' => false))
        ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver) {
        $resolver->setDefaults(array(
            'data_class' => 'AppBundle\Entity\Candidate',
            'candidate_contacts_form' => 'AppBundle\Form\CandidateContactsType'
        ));
    }
}

edit_js.html.twig

<script type="text/javascript">
    var count = $('.form-inline').length;
    if (count === 5) {
        $("#add_choice").hide();
    }
    $('a#add_choice').click(function (e) {
        if (count + 1 === 6) {
            $("#add_choice").hide();
        }
        if (count < 6) {
            e.preventDefault();
            addChoiceForm();
            count++;
        }
    });
    $(document).on("click", "button.delete_choice", function (e) {
        e.preventDefault();
        $(this).parent().parent().parent().remove();
        count--;
        $("#add_choice").show();
    });
    function addChoiceForm() {
        var collectionHolder = $('div#contacts');
        var prototype = collectionHolder.attr('data-prototype');

        // Replace '__name__' in the prototype's HTML to instead be a number based on the current collection's length.
        var newForm = prototype.replace(/__name__/g, collectionHolder.children().children().length);

        var newFormRow = $("<div></div>").append(newForm);
        collectionHolder.append(newFormRow);
    }
</script>

editPersonnelInformation.html.twig

{% extends 'front.html.twig' %}
{% form_theme editCandidate 'errors.html.twig' %}
{% form_theme editCandidate 'form_custom_layout.html.twig' %}
{% block breadcrumb %}
    <div class="header-page-title">
        <div class="container">
            <h1>Mon Espace </h1>
            <ul class="breadcrumbs">
                <li><a href="{{ path('home') }}">Mon espace</a></li>
                <li><a href="{{ path('aboutus') }}">Mon profil </a></li>
            </ul>
        </div>
    </div>        
{% endblock breadcrumb %}
{% block leftSidebar %}
    <div class="col-sm-4 page-sidebar">
        <aside>
            <div class="widget sidebar-widget white-container candidates-single-widget">
                <div class="widget-content">
                    <div class="thumb">
                        <img src="{{ asset('assets/img/content/face-6.png') }}" alt="">
                    </div>
                    <br><br>
                    <a href="{{ path('jobseeker') }}" >Mon Profil</a><br>
                    <a href="{{ path('jobseeker_cover_letters', {'token':candidate.token }) }}" >Letters de motivation</a><br>
                    <a href="{{ path('jobseeker_documents', {'token':candidate.token }) }}" >Mes Documents</a><br>
                </div>
            </div>
        </aside>
    </div> <!-- end .page-sidebar -->
{% endblock leftSidebar %}
{% block body %}
    {% for flashMessage in app.session.flashbag.get('notice') %}
        <div class="alert alert-success alert-block fade in">
            <button data-dismiss="alert" class="close close-sm" type="button">
                <i class="fa fa-times"></i>
            </button>
            <h4>
                <i class="icon-ok-sign"></i>
                Succès!
            </h4>
            <p>{{ flashMessage }}</p>
        </div>
    {% endfor %}
    <div class="col-sm-12 page-content">
        <div class="title-lines">
            <h3 class="mt15">Information Personnelles et Professionelles</h3>
        </div>
        <div class="candidates-item candidates-single-item">
            <form action="" method="post" class="form-horizontal" 
                  novalidate="" id="frm_candidate">
                <label class="control-label">Contact</label>
                <div id="contacts" data-prototype="{% filter escape %}{{ _self.contactsPrototype(editCandidate.contacts.vars.prototype) }}{% endfilter %}">
                    {% for contact in editCandidate.contacts %}
                        {{ _self.contactsPrototype(contact) }}
                    {% endfor %}
                </div>
                <a href="javascript:;" id="add_choice">
                    <i class="fa fa-plus"></i> Ajouter Contact
                </a>

                {{ form_row(editCandidate._token) }}
            </form>
        </div>
    </div> <!-- end .page-content -->
{% endblock body %}
{% block javascripts %}
    {{ parent() }}   
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
    <script src="{{ asset('assets/pages/scripts/front-address.js') }}" 
    type="text/javascript"></script>   
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}" 
    type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}" 
    type="text/javascript"></script>
    <script src="{{ asset('assets/pages/scripts/form-validation.js') }}" 
    type="text/javascript"></script>    
    <script src="{{ asset('assets/pages/scripts/custom/radio-buttons.js') }}" 
    type="text/javascript"></script>  
    {% include 'edit_js.html.twig' %}
{% endblock javascripts %}
{% macro contactsPrototype(contact) %}
    <div class="form-inline" style="padding-bottom: 10px;">
        <div class="form-group">
            {{ form_widget(contact.name, {'attr': {'class' : 'form-control'} })}}
            {{ form_errors(contact.name) }}
        </div>
        <div class="form-group input-group">            
            {{ form_widget(contact.url, {'attr': {'class' : 'form-control input-large'} })}}
            <span class="input-group-btn">
                <button class="delete_choice" type="submit">
                    <i class="fa fa-trash"></i>Supprimer
                </button>
            </span>
            {{ form_errors(contact.url) }}
        </div>
    </div>
{% endmacro %}

errors.html.twig

{% block form_errors %}
    {% spaceless %}
        {% if errors|length > 0 %}
            {% for error in errors %}
                <span style="color: red;">{{
                    error.messagePluralization is null
                    ? error.messageTemplate|trans(error.messageParameters, 'validators')
                    : error.messageTemplate|transchoice(error.messagePluralization, error.messageParameters, 'validators')
                    }}</span>
            {% endfor %}
        {% endif %}
    {% endspaceless %}
{% endblock form_errors %}

form_custom_layout.html.twig

{% extends 'form_table_layout.html.twig' %}

{% block form_row %}
    <tr>
        <th{% if errors|length > 0 %} class="error"{% endif %}>
            {{ form_label(form, label|default(null)) }}
        </th>
        <td>
            {{ form_widget(form) }}
            {% if errors|length > 0 %}
                <div class="error">
                    {{ form_errors(form) }}
                </div>
            {% endif %}
        </td>
    </tr>
{% endblock %}

{% block field_label %}
    {{ parent() }}:
{% endblock %}

{% block field_errors %}
    {% if errors|length > 0 %}
        <ul class="error">
            {% for error in errors %}
                <li>
                    {{ error.messageTemplate|trans(error.messageParameters, 'validators') }}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}

{% block form_errors %}
    {% if errors|length > 0 %}
        <div class="error">
            <ul>
                {% for error in errors %}
                    <li>
                        {{ error.message }}
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endblock form_errors %}