2017-03-18 1 views
0

나는 마법사 폼을 동적으로 수정했습니다. 나는 문서 (http://symfony.com/doc/current/form/dynamic_form_modification.html#form-events-submitted-data)를 따라 왔고 하나의 문제가있다.symfony 폼 EventListener가 적절한 html 구조를 반환하지 않습니다.

내 목표는 사용자가 "브랜드"필드를 선택할 때 "모델"필드를 업데이트하는 것입니다.

가 여기 내 청취자가 같이하는 방법은 다음과 같습니다

public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $builder 
     ->add('name') 
     ->add('brand', EntityType::class, [ 
      'class' => 'DEERCMS\BrandBundle\Entity\Brand', 
      'choice_label' => 'name', 
      'multiple' => false, 
      'expanded' => false, 
     ]); 

    $formModifier = function (FormInterface $form, Brand $brand = null) { 
     $models = null === $brand ? array() : $brand->getModels(); 

     $form->add('model', EntityType::class, array(
      'class'  => 'DEERCMS\ModelBundle\Entity\Model', 
      'choices'  => $models, 
      'multiple' => false, 
      'expanded' => false, 
     )); 
    }; 

    $builder->addEventListener(
     FormEvents::PRE_SET_DATA, 
     function (FormEvent $event) use ($formModifier) { 
      // this would be your entity, i.e. SportMeetup 
      $data = $event->getData(); 
      $formModifier($event->getForm(), $data->getBrand()); 
     } 
    ); 

    $builder->get('brand')->addEventListener(
     FormEvents::POST_SUBMIT, 
     function (FormEvent $event) use ($formModifier) { 
      // It's important here to fetch $event->getForm()->getData(), as 
      // $event->getData() will get you the client data (that is, the ID) 
      $brand = $event->getForm()->getData(); 

      // since we've added the listener to the child, we'll have to pass on 
      // the parent to the callback functions! 
      $formModifier($event->getForm()->getParent(), $brand); 
     } 
    ); 

} 

는 AJAX 호출이 전송되지만 정확히 같은 HTML 구조를 반환, 내 목표는 "모델"라는 필드를 업데이트하는 것입니다. 여기 템플릿입니다 :

{{ form_start(form, {'attr': {'id': 'form', 'class': 'form-horizontal', 'onChange': 'changed()' } }) }} 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Marka </label> 
      <div class="col-md-9"> 
       {{form_row(form.brand, {'id': 'test', 'attr': { 'class': 'form-control'}}) }} 
      </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-3 control-label">Model </label> 
      <div class="col-md-9"> 
       {{form_widget(form.model, {'id': 'test1', 'attr': { 'class': 'form-control'}}) }} 
       </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-md-3 control-label"></label> 
      <div class="col-md-9"> 
       <button type="submit" class="btn btn-success">{% if is_editing %}EDYTUJ {% else %}DODAJ{% endif %}</button> 
      </div> 
    </div> 
{{form_end(form)}} 

그리고 여기 AJAX 호출

<script> 
function changed() { 
    var brand = $('#test'); 
    // ... retrieve the corresponding form. 
    var $form = $('#form'); 

    console.log($form); 
    // Simulate form data, but only include the selected sport value. 
    var data = {}; 
    data[brand.attr('name')] = brand.val(); 
    // Submit data via AJAX to the form's action path. 
    jQuery.ajax({ 
     url : $form.attr('action'), 
     type: "POST", 
     data: data, 
     success: function (html) { 
      console.log(html) 
      $("#test1").replaceWith(
       // ... with the returned one from the AJAX response. 
       $(html).find("#test1") 
      ); 
      // Position field now displays the appropriate positions. 
     } 
    }); 
} 
</script> 

의 난을 console.log (HTML)를 할 수는 "모델"데이터를 포함하지 않는, 그래서 그것은 정확히 같은 HTML 구조를 보여줄 때하는 리스너로부터 검색되어야합니다.

내 관계를 모두 확인했는데 정상적으로 작동합니다.

답변

0

해결했습니다!

이유가 작동하지 않는 이유는 form_start에서 onChange() atribute가 있었기 때문입니다. form_row (form.brand) 안에 있어야합니다.

관련 문제