Bootstrap模式中的Symfony4表单验证

时间:2019-02-28 07:25:07

标签: forms symfony twig

我的控制器中有两种形式

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个不同的密码,模式已关闭且看上去密码已被修改,则无法验证不是。只有当我再次打开模态表单时,我才得到信息“密码必须相同”。我应该如何正确验证此表格?

1 个答案:

答案 0 :(得分:0)

您应该向JavaScript中添加一些其他代码,因为如果您提交此表单并且该表单无效,则该模式将不会再次打开。

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

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