Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Symfony Forms - Advanced Use Cases

Symfony Forms - Advanced Use Cases

Alexandre Salomé

June 17, 2021
Tweet

More Decks by Alexandre Salomé

Other Decks in Technology

Transcript

  1. Symfony Forms
    Advanced Use Cases
    Alexandre Salomé - 2021

    View Slide

  2. Re-edition

    View Slide

  3. View Slide

  4. Symfony Forms - Use Cases
    #1: Login
    #2: Change password
    #3: Sortable fields
    #4: Security based fields

    View Slide

  5. #1: Login

    View Slide

  6. Symfony Maker
    Quickly bootstrap a login form:

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Controller
    Creating form from the controller:

    View Slide

  11. Controller
    Creating form from the controller:

    View Slide

  12. Controller
    Creating form from the controller:

    View Slide

  13. Controller
    Creating form from the controller:

    View Slide

  14. Controller
    Creating form from the controller:

    View Slide

  15. Templating
    Simplify login template:

    View Slide

  16. Test it
    No style

    View Slide

  17. Templating
    Enable bundled templates, add a custom one:

    View Slide

  18. Templating
    Enable bundled templates, add a custom one:

    View Slide

  19. Templating
    Enable bundled templates, add a custom one:

    View Slide

  20. Test it
    Looks good

    View Slide

  21. Test it
    It fails because of invalid field names.

    View Slide

  22. Form naming
    $formFactory
    ->create(LoginType::class)
    ;
    login[_username]
    login[_password]
    login[_remember_me]
    login[_csrf_token]
    $formFactory
    ->createNamed('foo', LoginType::class)
    ;
    foo[_username]
    foo[_password]
    foo[_remember_me]
    foo[_csrf_token]
    $formFactory
    ->createNamed('', LoginType::class)
    ;
    _username
    _password
    _remember_me
    _csrf_token

    View Slide

  23. Creating a form in the controller
    Configure the name of the generated form by using the FormFactory service.

    View Slide

  24. Test it
    Form names are now correct...

    View Slide

  25. Remember last username
    We use the “data” argument:

    View Slide

  26. Add error message to the form
    We add a FormError to the Form object:

    View Slide

  27. Test it
    CSRF token is invalid

    View Slide

  28. Configure CSRF through options

    View Slide

  29. Configure CSRF through options

    View Slide

  30. Changing the Authenticator

    View Slide

  31. Fixed, it works (almost)
    This field “remember me” is required by the browser:

    View Slide

  32. Configuring field options
    We can configure options for each field:

    View Slide

  33. It works!

    View Slide

  34. Creating a form type (1/2)
    You can also create a dedicated form class type, as explained in documentation.

    View Slide

  35. Creating a form type (2/2)
    Controller can be simplified

    View Slide

  36. Login Controller consolidated

    View Slide

  37. Login

    View Slide

  38. Login

    View Slide

  39. Login

    View Slide

  40. Login

    View Slide

  41. Form tree

    View Slide

  42. Form tree

    View Slide

  43. Form tree

    View Slide

  44. Login Form - Conclusion
    - Form manipulation
    - Type, data and options
    - Form tree
    - Type hierarchy

    View Slide

  45. #2: Change password

    View Slide

  46. Existing profile page

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. ChangePasswordType
    Data is a User object
    Children
    - Old password
    - New password repeated
    Dependency to UserPasswordEncoder

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. Adding an event listener

    View Slide

  57. Adding an event listener

    View Slide

  58. Form lifecycle
    Build Before submission After submission
    Listeners Write Read only Read only
    Options Write Read only Read only
    Transformers Write Read only Read only
    Children & parents Write Write Read only
    Errors Write Write Write

    View Slide

  59. Form lifecycle
    Build Before submission After submission
    Listeners Write Read only Read only
    Options Write Read only Read only
    Transformers Write Read only Read only
    Children & parents Write Write Read only
    Errors Write Write Write
    PRE_SET_DATA POST_SET_DATA

    View Slide

  60. Form lifecycle
    Build Before submission After submission
    Listeners Write Read only Read only
    Options Write Read only Read only
    Transformers Write Read only Read only
    Children & parents Write Write Read only
    Errors Write Write Write
    PRE_SUBMIT SUBMIT POST_SUBMIT
    PRE_SET_DATA POST_SET_DATA

    View Slide

  61. Adding an event listener

    View Slide

  62. Inheritance of data in form

    View Slide

  63. Changes in the controller
    No change to the controller.

    View Slide

  64. Test it

    View Slide

  65. Form tree

    View Slide

  66. Form tree

    View Slide

  67. Form tree

    View Slide

  68. Change password - Conclusion
    - No change in controller
    - Events & Subscribers
    - Lifecycle
    - Relation to the model

    View Slide

  69. #3: Sortable form fields

    View Slide

  70. TodoItem Entity

    View Slide

  71. TodoItemType

    View Slide

  72. TodoListType

    View Slide

  73. Rendering

    View Slide

  74. Form template
    In _form.html.twig:

    View Slide

  75. Form template
    In _form.html.twig:

    View Slide

  76. Form rendering

    View Slide

  77. Form rendering
    ROW
    ROW
    ROW
    ROW
    ROW
    ROW

    View Slide

  78. Form rendering
    WIDGET
    WIDGET
    WIDGET
    WIDGET
    WIDGET

    View Slide

  79. Form rendering
    LABEL
    LABEL
    LABEL
    LABEL
    LABEL
    LABEL

    View Slide

  80. Form rendering
    ERRORS

    View Slide

  81. Form rendering
    ERRORS
    LABEL
    LABEL
    LABEL
    WIDGET
    WIDGET
    LABEL
    WIDGET
    WIDGET
    WIDGET
    LABEL
    LABEL
    ROW
    ROW
    ROW
    ROW
    ROW
    ROW

    View Slide

  82. Form rendering
    ROW
    WIDGET
    ERRORS
    LABEL

    View Slide

  83. Form rendering
    ROW
    ERRORS
    LABEL
    ROW
    WIDGET
    ERRORS
    LABEL
    ROW
    WIDGET
    ERRORS
    LABEL
    ROW
    WIDGET
    ERRORS
    LABEL

    View Slide

  84. Form template
    A form template contains block definitions:

    View Slide

  85. Block name resolution
    Symfony searches for a block name by looking at
    the type hierarchy.

    View Slide

  86. Rendering

    View Slide

  87. SortableType

    View Slide

  88. TodoListType

    View Slide

  89. Encore &
    Symfony UX

    View Slide

  90. SortableType > Form Template

    View Slide

  91. SortableType > Form Template

    View Slide

  92. sortable_controller.ts

    View Slide

  93. sortable_controller.ts

    View Slide

  94. sortable_controller.ts

    View Slide

  95. sortable_controller.ts

    View Slide

  96. Visible position fields

    View Slide

  97. Hide the field

    View Slide

  98. Rendering

    View Slide

  99. Sortable - Conclusion
    - Form templating engine
    - No change in page template
    - Form view model (row/label/widget/error)
    - Block name resolution logic

    View Slide

  100. #3: Security based fields

    View Slide

  101. A new option “is_granted”

    View Slide

  102. Types & extensions
    FormType FormTypeExtension
    buildForm
    buildView
    finishView
    configureOptions
    getParent
    getExtendedTypes

    View Slide

  103. Creating a new TypeExtension
    CsrfTypeExtension
    ValidatorTypeExtension FormType

    View Slide

  104. Creating a new TypeExtension
    CsrfTypeExtension
    ValidatorTypeExtension
    SecurityTypeExtension
    FormType

    View Slide

  105. Creating a new TypeExtension

    View Slide

  106. Creating a new TypeExtension

    View Slide

  107. Creating a new TypeExtension

    View Slide

  108. Creating a new TypeExtension

    View Slide

  109. View Slide

  110. Security based fields - Conclusion
    - TypeExtension is similar to Type
    - Allow extending any type

    View Slide

  111. Type
    Listeners
    Options
    mapped
    virtual
    Data
    CollectionType
    Form tree
    Root
    Children
    Form lifecycle
    Submit
    Form events
    Type hierarchy
    Templating
    TodoItem
    TodoList
    SortableType CSRF
    FormFactory
    createNamed
    Builder

    View Slide

  112. Thank you to Symfony ❤
    Content credits
    - Icons from Freepik - Flaticon
    - Code rendered with carbon.now.sh
    Voilà !

    View Slide