Symfony Forms - Advanced Use Cases - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Symfony Forms Advanced Use Cases Alexandre Salomé - 2021

Slide 2

Slide 2 text

Re-edition

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

#1: Login

Slide 6

Slide 6 text

Symfony Maker Quickly bootstrap a login form:

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Controller Creating form from the controller:

Slide 11

Slide 11 text

Controller Creating form from the controller:

Slide 12

Slide 12 text

Controller Creating form from the controller:

Slide 13

Slide 13 text

Controller Creating form from the controller:

Slide 14

Slide 14 text

Controller Creating form from the controller:

Slide 15

Slide 15 text

Templating Simplify login template:

Slide 16

Slide 16 text

Test it No style

Slide 17

Slide 17 text

Templating Enable bundled templates, add a custom one:

Slide 18

Slide 18 text

Templating Enable bundled templates, add a custom one:

Slide 19

Slide 19 text

Templating Enable bundled templates, add a custom one:

Slide 20

Slide 20 text

Test it Looks good

Slide 21

Slide 21 text

Test it It fails because of invalid field names.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Test it Form names are now correct...

Slide 25

Slide 25 text

Remember last username We use the “data” argument:

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Test it CSRF token is invalid

Slide 28

Slide 28 text

Conﬁgure CSRF through options

Slide 29

Slide 29 text

Conﬁgure CSRF through options

Slide 30

Slide 30 text

Changing the Authenticator

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Conﬁguring ﬁeld options We can configure options for each field:

Slide 33

Slide 33 text

It works!

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Login Controller consolidated

Slide 37

Slide 37 text

Login

Slide 38

Slide 38 text

Login

Slide 39

Slide 39 text

Login

Slide 40

Slide 40 text

Login

Slide 41

Slide 41 text

Form tree

Slide 42

Slide 42 text

Form tree

Slide 43

Slide 43 text

Form tree

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

#2: Change password

Slide 46

Slide 46 text

Existing proﬁle page

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Adding an event listener

Slide 57

Slide 57 text

Adding an event listener

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Adding an event listener

Slide 62

Slide 62 text

Inheritance of data in form

Slide 63

Slide 63 text

Changes in the controller No change to the controller.

Slide 64

Slide 64 text

Test it

Slide 65

Slide 65 text

Form tree

Slide 66

Slide 66 text

Form tree

Slide 67

Slide 67 text

Form tree

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

#3: Sortable form ﬁelds

Slide 70

Slide 70 text

TodoItem Entity

Slide 71

Slide 71 text

TodoItemType

Slide 72

Slide 72 text

TodoListType

Slide 73

Slide 73 text

Rendering

Slide 74

Slide 74 text

Form template In _form.html.twig:

Slide 75

Slide 75 text

Form template In _form.html.twig:

Slide 76

Slide 76 text

Form rendering

Slide 77

Slide 77 text

Form rendering ROW ROW ROW ROW ROW ROW

Slide 78

Slide 78 text

Form rendering WIDGET WIDGET WIDGET WIDGET WIDGET

Slide 79

Slide 79 text

Form rendering LABEL LABEL LABEL LABEL LABEL LABEL

Slide 80

Slide 80 text

Form rendering ERRORS

Slide 81

Slide 81 text

Form rendering ERRORS LABEL LABEL LABEL WIDGET WIDGET LABEL WIDGET WIDGET WIDGET LABEL LABEL ROW ROW ROW ROW ROW ROW

Slide 82

Slide 82 text

Form rendering ROW WIDGET ERRORS LABEL

Slide 83

Slide 83 text

Form rendering ROW ERRORS LABEL ROW WIDGET ERRORS LABEL ROW WIDGET ERRORS LABEL ROW WIDGET ERRORS LABEL

Slide 84

Slide 84 text

Form template A form template contains block definitions:

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Rendering

Slide 87

Slide 87 text

SortableType

Slide 88

Slide 88 text

TodoListType

Slide 89

Slide 89 text

Encore & Symfony UX

Slide 90

Slide 90 text

SortableType > Form Template

Slide 91

Slide 91 text

SortableType > Form Template

Slide 92

Slide 92 text

sortable_controller.ts

Slide 93

Slide 93 text

sortable_controller.ts

Slide 94

Slide 94 text

sortable_controller.ts

Slide 95

Slide 95 text

sortable_controller.ts

Slide 96

Slide 96 text

Visible position ﬁelds

Slide 97

Slide 97 text

Hide the ﬁeld

Slide 98

Slide 98 text

Rendering

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

#3: Security based ﬁelds

Slide 101

Slide 101 text

A new option “is_granted”

Slide 102

Slide 102 text

Types & extensions FormType FormTypeExtension buildForm buildView finishView configureOptions getParent getExtendedTypes

Slide 103

Slide 103 text

Creating a new TypeExtension CsrfTypeExtension ValidatorTypeExtension FormType

Slide 104

Slide 104 text

Creating a new TypeExtension CsrfTypeExtension ValidatorTypeExtension SecurityTypeExtension FormType

Slide 105

Slide 105 text

Creating a new TypeExtension

Slide 106

Slide 106 text

Creating a new TypeExtension

Slide 107

Slide 107 text

Creating a new TypeExtension

Slide 108

Slide 108 text

Creating a new TypeExtension

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Security based ﬁelds - Conclusion - TypeExtension is similar to Type - Allow extending any type

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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