title: Symfony3 Ajax Form Add Extra Field
body: <p>AdminBundle\Form\CoreForm.php:</p>
  
  <pre><code>class CoreForm extends AbstractType
  {
      public function buildForm(FormBuilderInterface $builder, array $options)
      {
          /**
          Ajax Call : onSubmitAdd
          */
          $builder-&gt;add('set_core_doctrine_metadata_type', ChoiceType::class, array(
              'label' =&gt; 'Doctrine Metadata Cache Driver',
              'choices' =&gt; $this-&gt;getDoctrineAccelerator(),
              'empty_data' =&gt; 'array',
              'choice_translation_domain' =&gt; false,
              'attr' =&gt; array(
                  'onSubmitAdd' =&gt; 'set_core_doctrine_metadata_host|set_core_doctrine_metadata_port'
              )
          ))
  
          /**
          Ajax Response : onSubmitAdd
          */
          $doctrineModify = function (FormInterface $form){
              $metaDataDriver = $form-&gt;get('set_core_doctrine_metadata_type')-&gt;getData();
  
              if (!$form-&gt;isValid()) {
                  if ($metaDataDriver == 'memcache' || $metaDataDriver == 'memcached'){
                      $form-&gt;add('set_core_doctrine_metadata_host', TextType::class, array(
                          'label' =&gt; 'Doctrine Metadata Cache Host',
                      ))
                      -&gt;add('set_core_doctrine_metadata_port', IntegerType::class, array(
                          'label' =&gt; 'Doctrine Metadata Cache Port',
                      ));
                  }
              }
          };
  
          $builder-&gt;addEventListener(FormEvents::SUBMIT, function (FormEvent $event) use ($doctrineModify){
              $form = $event-&gt;getForm();
              $doctrineModify($form);
          });
      }
  }
  </code></pre>
  
  <p>Form Type:
  Form working smoothly. But it does not allow new field.</p>
  
  <p>jQuery Ajax Code:</p>
  
  <pre><code>$(document).on('change', '[onSubmitAdd]', function () {
      // Get Form
      form = $(this).closest('form');
  
      // Send Data
      var data = {};
      data[$(this).attr('name')] = $(this).val();
  
      // Html Block
      formGroup = $(this).closest('.form-group');
      getFormGroup = $(this).attr('onSubmitAdd');
      getFormGroup = getFormGroup.split('|');
  
      $.ajax({
          url: form.attr('action'),
          type: form.attr('method'),
          data: data,
          success: function (data) {
              addContent = "";
  
              // Get Items
              $.each(getFormGroup, function (index, item) {
                  dt = $(data.content.body).find('.' + item).html();
                  if (typeof dt != 'undefined'){
                      addContent = addContent + '&lt;div class="form-group"&gt;'+ dt +'&lt;/div&gt;';
                  }
              });
  
              // Replace or Add
              if (formGroup.next().hasClass('onSubmitAdded')){
                  formGroup.next().html(addContent);
              } else {
                  formGroup.after('&lt;div class="onSubmitAdded"&gt;'+ addContent +'&lt;/div&gt;');
              }
          }
      });
  });
  </code></pre>
  
  <p>Problem:
  Ajax system is working smoothly. 
  But when the form is submitted, the error code "This form should not contain extra fields"</p>