Agenda
01 forms evolution
02 schema driven forms
03 take-aways
Slide 4
Slide 4 text
2010
today
2016
forms evolution in Angular
template-driven forms reactive forms
template-driven forms
Slide 5
Slide 5 text
Why we dislike template-driven forms
• fragmented setup in template and component class
• templates got too big
• handling a control-Array is inconvenient
Slide 6
Slide 6 text
Why we like reactive forms
• more convenient way to create forms
• better integrations with streams
• better handling for lists of controls with FormArray
Slide 7
Slide 7 text
The unknown trade-offs
Template-driven forms...
• have a declarative API
• create FormGroup - & FormControl behind the scenes
• remove FormGroup - & FormControl behind the scenes
Slide 8
Slide 8 text
template-driven
forms
reactive
forms
Slide 9
Slide 9 text
Let’s dive into the
demo
Slide 10
Slide 10 text
schema-driven
forms
Slide 11
Slide 11 text
NgForm
NgModel
NgModelGroup
valueChanges
statusChanges
valueChanges
setErrors
Component
model schema
(formUpdated)
(formSafeSubmit)
FormSchema
process
errors
validations
yield
Overview
mental model
https://valibot.dev/guides/mental-model/
Slide 16
Slide 16 text
synchronous validation
NgModel
NgModelGroup
Slide 17
Slide 17 text
validate related fields
fields to be validated
condition
error
Where the error should be displayed target field(s)
Slide 18
Slide 18 text
asynchronous validation
Slide 19
Slide 19 text
asynchronous validation & Angular‘s IoC
Slide 20
Slide 20 text
schema parsing
throw error
yields result
Slide 21
Slide 21 text
infer typed model from schema
{
firstname: string,
lastname: string,
email: {
email: string,
verification: string
}
Slide 22
Slide 22 text
schema
processing
Slide 23
Slide 23 text
FormSchemaDirective
Slide 24
Slide 24 text
FormSchemaDirective
Slide 25
Slide 25 text
error notification for
NgModel & NgModelGroup
- reading error-Stream
- Find respective error
- setErrors on ngModel
- *required name (DX)
Slide 26
Slide 26 text
display form errors automatically
Slide 27
Slide 27 text
There is
one more
thing
Slide 28
Slide 28 text
runtime-check to improve DX
The schema is telling if we mistakenly
add controls or made a typo in the
name-attribute.
So we can add a runtime-check.
Slide 29
Slide 29 text
schema
handling
Slide 30
Slide 30 text
split form in
reusable parts
- still messy tepmplates?
- …
Slide 31
Slide 31 text
split form in
reusable parts
- still messy tepmplates?
- …
Slide 32
Slide 32 text
split form in reusable parts
- choose yourelf
Split you form in smaller chunks.
Slide 33
Slide 33 text
split form in
reusable parts
- connect to Parent NgForm
- reuse inferred model-type
Slide 34
Slide 34 text
no FormArray but Records instead
{
‘2528-2342-32’: null,
‘9643-8432-65’: 0,
‘5697-8875-18’: 1,
}
amount
productId
Slide 35
Slide 35 text
no FormArray but
Records instead
Record out,
or use schema transformations
Array in
Slide 36
Slide 36 text
take-aways
- We might have underestimated template-driven forms
- cleaner code through the introductions of schemas
- type-safety, because of valibot
- typo-safety, because of runtime-checks