Symfony Forms - Advanced Use Cases

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