在非实体类上以 Symfony 形式添加 ChoiceType 选项

Question

我有一个由 Ajax 请求提交的 Symfony 表单。此表单包含 2 个字段：日期（datepicker）和天数（choiceType）。我无法初始化表单构建的天数，因为它依赖于所选日期。使用 Javascript，我更新了 select-picker 中的选项。这很好用。通常，选项如下所示：<option value="1">1 jours<\option>。

现在，当提交表单时，我需要在choiceType 中添加这些字段。

我使用了 isXmlHttpRequest 方法，因为表单是通过 Ajax 请求提交的，等待答复。 如果表单有效，我需要通知 Ajax 调用（我不想渲染另一个模板）。 我在 Controller 中执行以下操作：

    /**
     * @param Request $request
     * @return Response
     * @Route("/ajout_favoris", name="ajoutFavoris")
     */
    public function ajoutFavoris(Request $request){

        $form = $this->creerFormulaire()->getForm();
        $form->handleRequest($request);

        if ($request->isXmlHttpRequest()){
            if ($form->isValid() ) {
                // actions ...

                $reponse = ['statut' => 'success'];

            }else {
                $reponse = ['statut' => 'form-invalid'];
            }
            $reponse = new Response(json_encode($reponse));
            $reponse->headers->set('Content-Type', 'application/json');
            return $reponse;
        }

        return $this->render('@Carte/Reservation/reservation.html.twig', array(
            "form" => $form->createView() ));

这是我构建表单的方式：

    public function creerFormulaire(){
        $formulaire = $this->createFormBuilder()

            ->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) {
                $form = $event->getForm();
                $data = $event->getData();
                $optionList = $this->getValidChoicesForNbJours($data["nbJours"]);
                $form->add('nbJours', 'choice', array(
                    'attr' => [ 'placeholder' => 'nombre de jours',
                        'class' => 'selectpicker',
                        ],
                    'choices' => $optionsList,
                ));
            })
            ->add('dateDebut', DateTimeType::class, [
                'widget' => 'single_text',
                'format' => 'dd/MM/yyyy',
                'input'  => 'datetime',
                'label' => 'Date début',
                'required' => true,
                'attr' => ['class' => 'datepicker input-date',
                    'type' => 'text',
                    'placeholder' => 'JJ/MM/AAAA',
                    'readonly' => true,
                    'required' => true,]
            ])
            ->add('nbJours', 'choice', [
                'label' => 'Nombre de jours',
                'choices' => [],
                'attr' => [ 'placeholder' => 'nombre de jours',
                    'class' => 'selectpicker',
                    'title' => 'Nombre de jours',
                    'readonly' => true,
                    'required' => false,]

            ])
            ->add('ajoutFavoris', SubmitType::class, [
                'label' => 'Ajouter aux favoris',
                'attr' => [ 'class' => 'btn btn-primary reserver' ]
            ]);
        return $formulaire;
    }

这里是我如何填写选项：

public function getValidChoicesForNbJours($range){
        $liste = [];
        for ($i = 1; $i <= $range; $i++){
            $liste[$i.' jours'] = strval($i);
        }
        return $liste;
    }

这里是 ajax 调用：

path_to_add_fav = ...
idPlan = ...
$("#form_ajoutFavoris").click(function (e) {
    let dateDebut = document.getElementById('form_dateDebut').value;
    let nbJours = document.getElementById('form_nbJours').value;

    if (dateDebut && nombreJours){
        let data = {
            poste_id: idPoste,
            plan_id: idPlan,
            nbJours: nbJours ,
        };

        $.ajax({
            url: path_to_add_fav,
            type: "post",
            data: JSON.stringify(data),
            dataType: "json",

            success: function (data) {
                console.log(data.statut);
                if (data.statut === "success") {
                    window.parent.$.fancybox.close();
                }
            }
        });
    }
});

Chrome 控制台中没有错误。在第一次提交时，它总是显示form-invalid，在下面，有时显示form-invalid，什么都没有......

我阅读了很多“类似的帖子”，但未能实现我的目标。这篇文章与one 相关，但问题现在不同了。

感谢您的阅读！

编辑：添加 HTML

{{ form_start(form) }}
                <div class="card-deck maxheight">
                    {% include '@Carte/Carte/poste_card.html.twig' with {'poste':poste, 'connected':connected, 'showbtn':false } %}

                    <div class="card card-form" id="card-reserv">
                        <div class="card-body">
                            {{ form_errors(form) }}

                            <div id="warning-pecheurs" class="alert alert-warning padding alert-dismissible"
                                 role="alert">
                                <button type="button" class="close float-right" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                warning message
                            </div>

                            <table id="table" class="largeur">
                                <colgroup>
                                    <col span="1" class="col1">
                                    <col span="1" class="col2">
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="input-group">
                                                {{ form_label(form.dateDebut) }}
                                            </div>
                                        </td>
                                        <td class="date">
                                            {{ form_widget(form.dateDebut) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            {{ form_errors(form.dateDebut) }}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <div class="input-group">
                                                {{ form_label(form.nbJours) }}
                                            </div>
                                        </td>
                                        <td>
                                            {{ form_widget(form.nbJours) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            {{ form_errors(form.nbJours) }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row margin0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            onclick="window.parent.$.fancybox.close()" value="CloseFB">
                        Annuler
                    </button>
                    {{ form_widget(form.ajoutFavoris) }}
                </div>

                {{ form_end(form) }}

这里是我如何在 JS 中填充选择器：

let new_options = "";
for (i = 0; i < nbOptions; i++, j++)
        new_options += "<option value=" + j + ">" + j + " jours</option>";
$("#form_nbJours").html(new_options).selectpicker('refresh');

编辑：解决方案 Ajax 方法调用是有罪的！ 有了这个调用，它就完美地工作了！

$('form').submit(function (e) {
    console.log("ok");
    e.preventDefault();
    let formSerialize = $(this).serialize();

    $.post(path_to_add_fav, formSerialize, function(response) {
        console.log(response.statut);
        if (response.statut === "success") {
            console.log("Réponse correcte !");
            window.parent.$.fancybox.close();
        }
    }, 'JSON');
}

Answer 1

添加字段后，您可以通过调用$builder->get('nbJours')->resetViewTransformers(); 来禁用表单验证