Symfony 4 Forms: Build, Render & Conquer!

4:45:40

What you'll be learning

Yep, forms! One of the most powerful and... confusing features in all of Symfony. Here's the truth: forms are just plain hard. You need to manage the HTML form elements, validation, data transformation and a lot more. The Form component might be the most complex part of Symfony. But the more you work with it, the more you'll like it.

So, let's work with some forms! We'll learn how to use Symfony forms to handle both simple & complex/ugly situations. Most importantly, I'll show you how to avoid the pitalls that many developers often fall into that causes the form component to spiral into complexity hell. The form system is a tool: in this tutorial, we'll put the joy back into it:

  • Creating a basic form
  • Basic form rendering and customization
  • Handling a form submit
  • Backing your form with an entity
  • Adding validation
  • Filling with default data
  • Creating a form "type" class
  • Understanding how forms really work
  • Flash messages

... and bad jokes + form tips & tricks!


Your Guides
Ryan Weaver

Buy Access
Login or register to track your progress!

Questions? Conversation?

  • 2019-05-25 haupt290

    Thank you @Diego Aguiar
    But I would like to do it on a server and I am not friendly with any java script frameworks

  • 2019-05-24 Diego Aguiar

    Hey haupt290

    That's advanced ;) To be honest I'm not sure how to actually do it using Symfony Form component, probably you would be better doing it with another tool (Maybe ReactJS?), you can handle all the logic for updating input fields in your frontend, and on submit, you can rely on Symfony Validation component so you don't miss validations

    Cheers!

  • 2019-05-24 haupt290

    Hi. This course is amazing!
    I would like to ask you a question about Dynamic TypeChoice fields. When I have only 2 TypeChoice fields it works no problem. Select one will update second one. But when I want to use 3 TypeChoice fields and each depend on what was selected in previous one It is not working and end up with Violation exception in field 3.
    I am adding PRE_SUBMIT event listeners to first field and second field and PRE_SET_DATA to the form to update second field and third field. But when press submit button on a form PRE_SET_DATA event is triggered and will remove second field and PRE_SUBMIT event listener for second field as well. Then PRE_SUBMIT event is triggered on first field and will add second field but adding PRE_SUBMIT event listener for second field is too late as Form system started iterating through registered listeners already and this new added will be ignored. So field number 3 will not be updated with new value and throws Violation Exception.

    How this problem can be sorted?
    Any suggestions are appreciated.
    Thank you
    Alex

  • 2019-02-11 weaverryan

    Hey toni!

    We're going to start releasing a course on uploading... hopefully next week. Watch for it!

    Cheers!

  • 2019-02-10 toni

    The course is great, but I notice the absence of file uploads, like images.
    I'm having some problems editing forms with images and I can not find anything. Any course that you recommend?

  • 2019-01-21 Victor Bocharsky

    Hey Radu,

    Btw, we're talking about handling password in this course in case you missed it:
    https://symfonycasts.com/sc...

    Maybe it might help you a bit.

    Cheers!

  • 2019-01-17 Diego Aguiar

    Hey Radu Barbu!

    Thanks for your kind words :) but this tutorial (Symfony Forms) is finished now, Anyway, we will consider your request.

    Cheers!

  • 2019-01-16 Radu Barbu

    First of all, this is premium stuff! I love it!
    Hope this series is not over yet cuz I would love to see some casts on editing more complex forms such as user profile form.
    Handling the password and profile picture fields is a delicate task.

  • 2018-12-19 weaverryan

    Hey Lopoi Popoi!

    Hmm, I'm not sure if there are any open source projects with a big example - the closest is probably the "finished" code from the tutorial I linked to. And, boy, if you have a "position", then you're going to want to do re-ordering... and also it sounds like you have file-uploads, which really means that you shouldn't just make the user choose 5 uploads, then process them all at once on submit (like the CollectionType would want) - you should upload them immediately via AJAX. I really think a JavaScript-powered solution is a better bet in this situation!

    Cheers!

  • 2018-12-19 Lopoi Popoi

    Thanks weaverryan !
    And your remark about avoiding this solution also valuable.
    May be you know some opensourced project to see code examples?
    I am struggling with product images , they have position field in product gallery, filename and some other fields as a image meta-data.

  • 2018-12-18 weaverryan

    Hey Lopoi Popoi!

    Already covered :) https://symfonycasts.com/sc...

    That is for Symfony 3, but nothing significant changed with this. The CollectionType is a really complex field type - it's tough to get set up and still sometimes may not work perfectly, depending on your situation. So, we DO have a tutorial on it, but I try to avoid it when I can and instead use a JavaScript/API/AJAX setup to accomplish something like this - it's a better user experience anyways.

    Cheers!

  • 2018-12-17 Lopoi Popoi

    Hello SymfonyCasts team!
    Please do not forget to cover embedded forms collection topic with add/edit option!

  • 2018-11-27 Alex

    weaverryan Thank you very much. This is definitely what I was looking for.

  • 2018-11-23 weaverryan

    Hey @Alex!

    Same answer! S3 - it can scale FOREVER. And, you can even configure your S3 bucket to automatically backup or even version. Heck, you can even configure images in S3 to move to "Glacier" after some period of time (another storage service - cheaper, but you can't get the files out very quickly). I don't know about Facebook specifically, but, for sure, they have some sort of big cloud storage - e.g. S3 - and they store the images/videos there (forever). In other words, Facebook likely uses something very similar to S3 - it scales forever.

    Let me know if that makes sense!

  • 2018-11-20 Alex

    weaverryan Thank you for your answer. But if you have a website where the number of users are increasing every day and they all have gallery of some kind with, may be, hundreds of images. Where would you store all those images then? And you need to back up all that as well.
    I have researched this problem on the web and different people does it differently. For example, where Facebook keeps all the images and videos we post?? Sorry for bothering you again.
    Thank you

  • 2018-11-20 weaverryan

    Hey @Alex!

    Excellent question! We don't deal with a lot of "uploads" here on Symfonycasts, but we do have a few, and we store them all in S3 using Flysystem. Flysystem makes communicating with S3 quite nice, and S3 gives us the ability to have public files or private files (which we can then make "public" temporarily via signed URLs - e.g. like if you want to allow a user to download a file). For large uploads, well, it depends on *how* large. The easiest way to handle uploads is to have the user upload to your server, and then you send it to S3. However, you can also ask S3 for a temporary URL and then have the user upload directly to that URL (basically, eliminating your server as the middleman). That setup is a bit more complex, but scales for larger files.

    Cheers!

  • 2018-11-20 Alex

    Hi Ryan. You are doing a great job. Thank you.
    I am looking for advice: How to store images of a lot of users?
    In Database or File System?
    Usually the users upload large images and in different formats. How to deal with all this?
    Thank you again.
    Media is a big part of any website in our days.
    Alex

  • 2018-10-26 Victor Bocharsky

    Hey there!

    We're working on this tutorial right now, so this will be the next. Thank you for your patience!

    Cheers!

  • 2018-10-26 伟伟权

    Come on! Come on! I'm waiting.

  • 2018-10-23 Victor Bocharsky

    Hey Bob,

    Thank you for your patience! We're working on this tutorial right now, so this one will be the next after "Symfony Security: Beautiful Authentication, Powerful Authorization" tutorial I think.

    Cheers!

  • 2018-10-23 Bob

    Can’t wait until This is availble. Been loving symfony 4 because of symfonycasts🙂

  • 2018-10-08 weaverryan

    Hey Daniele!

    Hmm, great question! Both!? :)

    Well, really, your entity most of the time. Until/unless you have a form that doesn’t really match your entity (e.g. a few different fields). Then, a model class in that case.

    But, some people use model classes all the time. There’s definitely know issue with this - I just think it adds extra work with limited benefit. But ultimately, it’s a matter of taste :).

    Cheers!

  • 2018-10-08 Daniele Grillenzoni

    Is this going to recommend binding entities to forms or use separate objects?

  • 2018-09-14 Hermen

    Thanks for the tip!

  • 2018-09-14 El Tebe

    You should add the EWZRecaptchaBundle (https://github.com/excelweb... to your project,
    then insert a new form element (just like the builtin / service ones) in your form declaration:

    $builder->add('recaptcha', EWZRecaptchaType::class, array(
    'language' => 'en'
    // ...
    ));

    It suppors the "image" and the "invisible" version of Google's Recaptcha too.

  • 2018-09-13 Hermen

    Hey guys and gals,

    Are you going to cover recaptcha to?

  • 2018-09-11 Radu Barbu

    Cool, then I'm going to watch S3 until S4 appears.

    Btw, you're doing a great job with the S4 series so far!

  • 2018-09-10 weaverryan

    Hey Radu Barbu!

    *Probably* after our security tutorial, which just started release yesterday :). I can't promise for sure - I'm still finishing the security tutorial, but this is my next target. Until then, the Symfony 3 version of the tutorial - https://knpuniversity.com/s... - is still quite relevant. The Symfony directory structure, is different, as are some service config things. But, the core of the "form" system actually hasn't changed much - it's all still up to date.

    Cheers!

  • 2018-09-08 Radu Barbu

    Any news on when this course will be launched? Can't wait for it!

  • 2018-08-14 weaverryan

    Hey Peter Kosak!

    1) I see! For this, you should use ChoiceType directly. This may or may not be easy - there's a shortcut I've never tried :). Set the choices option to your dynamic data - e.g. $product->getProductsForDropdown(), where the key of each item in the array would be the display value, and the value of each item in the array would be the Product objects themselves. If this works, then, on submit, everything should just work. I've never used the ChoiceType and set the values of the "choices" to entity objects... but I think it should work. Let me know! :)

    2) Interesting idea about the audit table! Usually, this is done with a Doctrine event listener. However, the downside to that approach is that, for example, if a Product is being updated, that's all you know: you don't know exactly which form in the system is causing the update.

    This is indeed a very interesting, and complex idea - I'll see if it fits into the tutorial! The way to achieve this would be to:

    A) Create a "form type extension" - https://symfony.com/doc/cur... - which you could use to modify every form in the entire system

    B) Inside the buildForm() method of that form type extension, attach an event listener - https://symfony.com/doc/cur... - probably on the SUBMIT or POST_SUBMIT events.

    With this, you would now have a callback that is executed whenever ANY form in your system is submitted, and you could use that to log stuff. This isn't a full explanation of course, you would still need to create an entity, use dependency injection to inject the EntityManager into your form type extension, etc - but hopefully it can get you started!

    Cheers!

  • 2018-08-09 Peter Kosak

    Thanks for reply:
    - 1st: Yes thats what everyone is suggesting but my situation is slighly more complicated. Imagine you have a printed invoice with invoice number. With product "product" but admin can change this to "amazing product" suddenly your invoice is different when you print it before and after admin change when using entity type.
    I could use a flag in product table to deactivate "product" and create a new "amazing product" (so it would have different id") and in dropdown create custom query to list only active products but it would be more easier for me just to save choice value instead of entity. I have tried to change choice_value for entity type in form builder. Saving was working fine but when accessing same invoice dropdown values & options would be populated correctly but selected item in this case "product" would reverted back to "Please choose" so what I would like to achieve is to have ChoiceType populated by values from DB(Entity -> getProductsForDropdown) lets say my array looks like:

    $productChoices = [
    "product" => "product",
    "other amazing product" => "other amazing product"
    ...
    ]

    But I have no idea how to pass it into form type properly.

    -2nd: Lets say you are shopping and you will add "product 1" to cart.
    I would like to log this action into database like
    User: Peter, Product: product 1, Action: Added to Cart, TimeStamp
    When user delete from cart I would like to log into db
    User: Ryan, Product: product 2, Action: Deleted from Cart, TimeStamp
    Then when user submit any form also search form to log it into DB
    User: John, Product: blank, Action: Search for product "amazing product", TimeStamp
    Basically I could on form handling populate this manually like
    <code. $log="new" log();="" $log-="">setUser(blabla);
    $log->setAction(blabla);
    $log->.....;
    $em->persist($log);
    $em->flush();

    but what if you have 40 routes where user can submit a form I would have to repeat this 40 times.

    I would like generic solution that would work with any submit. At least to log action.

    User,Action (Clicked on Submit button) and get submitted data.

    This would be useful for tracibility and also for audit if manager will ask I didnt delete "product" and admin will go to audit table search for product and find out that user John deleted product from cart on 14/8/2018 at 05am :D

    Or listen for event addToCart anywhere in the software.

    I am beginner so hopefully it makes sence.

  • 2018-08-09 weaverryan

    Hey Peter Kosak!

    GREAT suggestions! The items in the link are indeed a pain in the butt ;). Can you tell me a bit more about:

    > binding option values to ChoiceType coming from DB

    Do you mean, you want to create a ChoiceType with options that come from the database? Are you not able to use the EntityType? Or do you have a more complex situation?

    And can you tell me more about this one too?

    > on submit log action with data to audit table

    Thanks for the suggestions! Cheers!

  • 2018-08-08 Peter Kosak

    Please please please include examples of each of these http://symfony.com/doc/curr... & form theming & binding option values to ChoiceType coming from DB & on submit log action with data to audit table would be a bonus for most of us (at least me lol)