Share
Embed
Slide 1
Slide 1 text
Getting
started with
Signal Forms
Dhananjay Kumar
Trainer & Founder, nomadcoder
Slide 2
Slide 2 text
Reactive Form
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Signal Forms allows you to manage form state by
building on the reactive foundation of signals.
With automatic two-way binding, type-safe field
access, and schema-based validation, Signal
Forms help you create robust forms.
Ref- Angular Doc
Slide 5
Slide 5 text
Let us start
with creating a
Form
Slide 6
Slide 6 text
Create the
form model
interface
Slide 7
Slide 7 text
Create the
form model
signal
Slide 8
Slide 8 text
Create the
form
Slide 9
Slide 9 text
Connecting
to template
Slide 10
Slide 10 text
Adding
validators
Slide 11
Slide 11 text
Displaying
error
messages
Slide 12
Slide 12 text
Submitting
the form
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
The form() function returns a FieldTree, an
object where each form field is represented
as a signal enriched with reactive
properties like value, dirty, and invalid.
FieldTree
Slide 15
Slide 15 text
FieldTree
Slide 16
Slide 16 text
FieldTree
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Validators
required() email() min()
max() minLength() maxLength()
pattern()
Slide 19
Slide 19 text
Custom
Validator
Slide 20
Slide 20 text
Use in form
Slide 21
Slide 21 text
Validations
Flow
Slide 22
Slide 22 text
Async
Validator
• Check if usernames or emails are
already taken
• Look up data in the database to
confirm values
• Use external services (APIs) to verify
things like addresses or tax IDs
• Apply business rules that only the
server can validate
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Signup
form
Slide 25
Slide 25 text
Signup
form
Slide 26
Slide 26 text
Signup
form
Slide 27
Slide 27 text
Signup
form
Slide 28
Slide 28 text
Async
validator
Slide 29
Slide 29 text
Async
validator
Slide 30
Slide 30 text
Async
Validator
Slide 31
Slide 31 text
Async
Validator
Slide 32
Slide 32 text
Request
function
• Undefined to skip the validation
• A URL for performing the validation using
the GET operation
• An HttpResourceRequest if you need to
set additional request options, such as
the verb header, etc.
• This is the same object you use with
httpResource to configure the request
object.
Slide 33
Slide 33 text
The onError function
handles request failures
like network errors or
HTTP errors.
• The onSuccess function receives the
HTTP response and returns validation
errors or undefined for valid values.
• It can also return multiple errors when
needed.
validateHttp
Slide 34
Slide 34 text
Async
validatior
POST
Slide 35
Slide 35 text
It is a lower-level API that exposes Angular's resource
primitive directly. It offers complete control but requires
more code and familiarity with Angular's resource API.
Most application should use validateHttp ()
validateAsync()
Slide 36
Slide 36 text
validateAsync()
Slide 37
Slide 37 text
validateAsync()
•Non-HTTP validation - WebSocket connections,
IndexedDB lookups, or Web Worker
computations
•Custom caching strategies - Application-
specific caching beyond simple memorization
•Complex retry logic - Custom backoff
strategies or conditional retries
•Direct resource access - When you need the
full resource lifecycle
Slide 38
Slide 38 text
Signal Forms are backed by a model, which is a writable
signal. When the model value changes, the form updates
automatically. Likewise, when the user interacts with the
form, the model is updated. In this way, the model and the
form are connected through two-way binding, which
means changes in one are reflected in the other.
Two way Binding
Slide 39
Slide 39 text
Two way
Data
Binding
Slide 40
Slide 40 text
Two Way Data Binding
Slide 41
Slide 41 text
Bind API
response
to form
Slide 42
Slide 42 text
User input to model flow
Slide 43
Slide 43 text
model to user input flow
Slide 44
Slide 44 text
The form model and the domain model are two
different concepts and should be treated separately.
Your API response may map directly to the domain
model, but you should define a dedicated form
model when working with signal-based forms.
Form Model
Slide 45
Slide 45 text
Always use
explicit
typescript type to
define the mode
Slide 46
Slide 46 text
When you define a form using explicit types as
shown above, the resulting field tree is fully
type-safe. For example, loginForm.email is
inferred as FieldTree, and any attempt
to access a property that doesn’t exist will
produce a compile time error.
Type Safety
Slide 47
Slide 47 text
Undefined
• Set the value explicitly to null
• For input fields such ,
set the value to empty string.
• Do not use undefined
Slide 48
Slide 48 text
Optional
Fields
• Fields explicitly set to undefined are
omitted from the field tree.
• A model defined as { value: undefined }
behaves the same as {}.
• Accessing that field returns undefined
instead of a FieldTree instance
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Homework
• Migration using compatForm
• Creating Custom Control
• Implement Form Array
Slide 51
Slide 51 text
Thank You • [email protected]
• Training
• Consulting
• Speaking
• MVP development
• Product Development