首页 > 解决方案 > 引导模式中的 Symfony4 表单验证

问题描述

我的控制器中有两个表格

public function index($id, Request $request, UserPasswordEncoderInterface $passwordEncoder)
{
    $user = $this->getDoctrine()
        ->getRepository(User::class)
        ->find($id);

    // First form for edit User //
    $form = $this->createForm(EditUserType::class, $user);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {

        $user = $form->getData();
        $em = $this->getDoctrine()
            ->getManager();

        $em->persist($user);
        $em->flush();
        $this->addFlash('notice', 'User profile has been updated');
        return $this->redirectToRoute('user_list');
    }

    // Second form for edit password //
    $form2 = $this->createForm(ChangePasswordType::class, $user);
    $form2->handleRequest($request);

    if ($form2->isSubmitted() && $form2->isValid()) {

        $user->setPassword(
            $passwordEncoder->encodePassword(
                $user,
                $form2->get('password')->getData()
            )
        );

        $user = $form2->getData();
        $em = $this->getDoctrine()
            ->getManager();

        $em->persist($user);
        $em->flush();
        $this->addFlash('notice', 'User password has been updated');
        return $this->redirectToRoute('edit_user', [
            'id' => $id
        ]);
    }

    return $this->render('desktop/editUser.twig', [
        'formPassword' => $form2->createView(),
        'form' => $form->createView(),

    ]);
}

我通过它来查看:

<div class="row">
        <div class="col-md-8 mx-auto">
            <button type="button" class="btn btn-primary content-margin-top-bot password-button" data-toggle="modal" data-target="#myModal"> Password change </button>
            <h2>Edit user</h2>
            {{ form_start(form)}}
            {{ form_widget(form)}}
            {{ form_end(form)}}
        </div>
</div>

<div class="row justify-content-center ">
    <div class="col-md-9">
        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Change password</h4>
                        <button type="button" class="close" data 
 dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        {{ form_start(formPassword) }}
                        {{ form_widget(formPassword)}}
                        {{ form_end(formPassword) }}
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data- 
 dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的 ChangePasswordType:

class ChangePasswordType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('password', RepeatedType::class, [
                'constraints' => [
                    new NotBlank(),
                ],
                'type' => PasswordType::class,
                'required' => true,
                'first_options' => ['label' => 'New password'],
                'second_options' => ['label' => 'Repeat password', ],
                'invalid_message' => 'Passwords must be identical',
            ])
            ->add('change password', SubmitType::class);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => User::class,
        ]);
    }
}

我的问题是,此表单未正确验证,当我以模式打开表单时,我可以编辑密码,但如果我输入 2 个不同的密码,则没有验证,模式已关闭并且看起来密码已被修改但它不是. 只有当我再次打开模态表单时,我才会收到“密码必须相同”的信息。我应该如何正确验证此表格?

标签: formssymfonytwig

解决方案


您应该在 javascript 中添加一些额外的代码,因为如果您提交此表单并且它无效,则模式将不会再次打开。

快速而肮脏的解决方案是放置以下代码。

{% if not formPassword.vars.valid %}
    $('#idofyourmodal').modal('show');
{% endif % }

推荐阅读