[040] Symfony4 表单入门 Part01

使用 Symfony 来实现一个注册表单, 这里我们使用 Bootstrap4 快速实现一个简单的注册表单如下:

SignUp.png

HTML源代码非常简单:

      
      

        

          
Sign Up
        
      

      


        

          Name
          

            

              

                
              
            
            
          
          

        

        

          Email address
          

            

              

                
              
            
            
          
          

        

        

          Password
          

            

              

                
              
            
            
          
          

        

        

          Get Started For Free
        
                        
        

          

            

            or
          
        
                        
        

          
Already have an account? Sign in
        
                   
      
      

    

现在用 symfony 来完成一个注册操作. 先安装一下 form 包.

composer require symfony/form

创建一个控制器 DefaultController, 添加方法: signUp() 来处理注册页面.

createFormBuilder();
        $formBuilder->add('name', TextType::class);
        $formBuilder->add('email', EmailType::class);
        $formBuilder->add('password', PasswordType::class);
        $formBuilder->add('save', SubmitType::class);
        $form = $formBuilder->getForm();

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $data = $form->getData();
            dump($data);
        } else {
            dump($form->getErrors());
        }
        
        return $this->render('default/sign-up.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

在模板文件里直接输出 form

{# template/default/signup.htm.twig #}

{{ form(form) }}

表单渲染出来非常的干净, 纯 Form 元素.

    

        

            Name
            
        
        

            Email
            
        
        

            Password
            
        
        

            Save
        
        
    

表单提交后, 可以打印到用户输入的数据是一个数组. 大概类似这样:

[
    "name" => "Hill"
    "email" => "ssdf@sdf"
    "passwd" => "1212"
]

如果直接使用 {{ form(form) }} 这样输出是很丑的, 通常我们网页美化是很重要的. 所以在创建表单的时候更多的是详细输出到设计好的 dom 结构中去. 为了让 sf 的 form 创建的表单和我们在之前静态表单一致, 我们需要定制化输出传入到实体的表单对象. 把模板代码改成下面的样子:

{# template/default/sign-up.html.twig #}
{% extends 'base.html.twig' %}

{% block title %} Sign up {% endblock %}

{% block body %}
    


        

            

                

                    


                        
                        

                            

                                
Sign Up
                            
                        

                        {{ form_start(form, {'method': 'POST', 'attr': {'novalidate': 'novalidate'}}) }}

                            

                                {{ form_label(form.name, 'Name', {'label_attr': {'class': 'small'}}) }}
                                

                                    

                                        

                                            
                                        
                                    
                                    {{ form_widget(form.name, {'attr': {'class': 'form-control', 'placeholder': 'Enter name'}}) }}
                                
                                
{{ form_errors(form.name) }}
                            

                            

                                {{ form_label(form.email, 'Email address', {'label_attr': {'class': 'small'}}) }}
                                

                                    

                                        

                                            
                                        
                                    
                                    {{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'Enter email'}}) }}
                                    
                                
                                
{{ form_errors(form.email) }}
                            

                            

                                {{ form_label(form.passwd, 'Password', {'label_attr': {'class': 'small'}}) }}
                                

                                    

                                        

                                            
                                        
                                    
                                    {{ form_widget(form.passwd, {'attr': {'class': 'form-control', 'placeholder': 'Enter password'}}) }}
                                    
                                
                                
{{ form_errors(form.passwd) }}
                            

                            

                                {{ form_widget(form.save, {'attr': {'class': 'btn btn-block mybtn btn-primary tx-tfm rounded-pill'}, 'label': 'Get Started For Free'}) }}
                                
                            

                            

                                

                                    

                                    or
                                
                            

                            

                                
Already have an account? Sign in
                            

                        {{ form_end(form) }}
                        

                    
                
            
        

    
{% endblock %}

这样一来, 表单就会按设计的结构展现, 符合预期要求. 这里使用了 form_start, form_end, form_label, form_widget 来拆开显示表单.

现在来继续了解 Symfony/form, 在控制器中. 表单使用 createFormBuilder()来创建, 在创建表单时候, 可以传入一个实体对象, 这样就会自动把用户提交的信息并入到实体对象中. 简单的改造一下注册的接口, 实现注册信息保存到数据库中, 然后返回首页

// ...
    public function signUp(Request $request)
    {
        $user = new User();

        $formBuilder = $this->createFormBuilder($user);
        $formBuilder->add('name', TextType::class);
        $formBuilder->add('email', EmailType::class);
        $formBuilder->add('passwd', PasswordType::class);
        $formBuilder->add('save', SubmitType::class);
        $form = $formBuilder->getForm();

        $form->handleRequest($request);

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

            $data = $form->getData();
            if (!$data instanceof User) {
                throw $this->createNotFoundException('Request page not founded.');
            }

            $data->setExpired(new \DateTime());
            $data->setResetPasswdExpired(new \DateTime());
            $data->setCreated(new \DateTime());

            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->persist($data);
            $entityManager->flush();

            return $this->redirectToRoute('url_home');
            //dump($data);
        } else {
            dump($form->getErrors());
        }

        return $this->render('default/sign-up.html.twig', [
            'form' => $form->createView(),
        ]);
    }

最简单的 Form 使用这样就完成了. 接下来了解一下项目中非常重要的表单验证.