SweetAlert2-表单错误时无法正确发送我的jsonResponse

时间:2020-01-30 15:52:08

标签: javascript axios capture sweetalert

我正在尝试使用SweetAlert2设置警报,并在其中包含一个表单。

为此,我发出一个Axios请求,该请求将使我获得表单的HTML呈现,并将其插入警报中。

然后,当我验证时,我将序列化输入的数据并验证表单。

回到控制器,如果一切正常,我将返回一个JSON响应(200)以表示一切正常。

但是,如果表单包含错误,我想从.catch()更新警报的'Html'属性,将其替换为表单的新HTML呈现,但其中将包含要纠正的错误

所以,我已经:

Controller.php

/**
     * @Route("/admin/stripe/product/{id}/update/form", name="stripe_admin_product_update_form", options={"expose"=true})
     *
     */
    public function updateProductForm(StripeProduct $product, Request $request)
    {
        $form = $this->createFormBuilder($product)
                    ->setAction($this->generateUrl('stripe_admin_product_update_form', ['id' => $product->getId()]))
                    ->add("name")
                    ->add("unitLabel")
                    ->add("bankStatementLabel")
                    ->getForm();
        $form->handleRequest($request);

        if($form->isSubmitted())
        {
            if($form->isValid())
            {
                return new JsonResponse([
                    "code" => 200,
                    "message" => "C'est bon"
                ]);
            }
            else
            {
                $response = [
                    "form" => $this->render("stripe_admin/product/_form_edit.html.twig", [
                        "form" => $form->createView(),
                    ])->getContent()
                ];

                return new JsonResponse($response, 400);
            }
        }

        $response = [
            "code" => 200,
            "form" => $this->render("stripe_admin/product/_form_edit.html.twig", [
                "form" => $form->createView(),
            ])->getContent()
        ];

        return new JsonResponse($response);
    }

在我的模板中:

template.html.twig

$(".js-update-coupon").click(function(){
            productId = {{product.id}};
            var url = Routing.generate("stripe_admin_product_update_form", {id: productId});
            axios.get(url)
                .then(function(response){
                    var form = response.data.form;
                    Swal.fire({
                        title: "Modifier ?",
                        html: form,
                        icon: "question",
                        showCancelButton: true,
                        showLoaderOnConfirm: true,
                        allowOutsideClick: () => !Swal.isLoading(),
                        preConfirm: function(result)
                        {
                            var data = $("#formUpdate").serialize();

                            return axios({
                                method: 'post',
                                url: url,
                                data: data
                            })
                            .then(function(response) {
                                Swal.fire({
                                    title: 'Modifications enregistrées !',
                                    icon: 'success',

                                    }).then(function() {
                                        document.location.reload(true);
                                    });
                            })
                            .catch(function(response) {
                                console.log(response);
                                var formError = response.data.form;
                                console.log(formError);
                                Swal.fire({
                                    html: formError,
                                })
                            })

                        }
                    });
                });
        })

问题出在.catch()级别

我似乎无法更新警报的“ HTML”属性。

如果我做出console.log(response);,我就

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

PS:400代码是我的。如果我通过输入代码500来更改答案,我将拥有相同的内容,但是代码为500

0 个答案:

没有答案