About mySelf
• Experienced FE developer, specialised in B2C applications
• Founder & developer @ e-square.io
• Angular-IL & AngularUP conf CO-organiser
• Writer for AngularInDepth
Slide 3
Slide 3 text
Building powerful Angular
community
Slide 4
Slide 4 text
Reusable Form Controls
Slide 5
Slide 5 text
Where it all begins…
Slide 6
Slide 6 text
Where it all begins…
Slide 7
Slide 7 text
Email input
X12
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Demo 1
Creating reusable form control
Slide 10
Slide 10 text
Objective 1
reusable form control
Requirements:
• Should support type text and password
• Should support validations for required and pattern
• Should show UI indications
• Show show error messages
The ControlValueAccesor
interface
A bridge between our custom input to the Angular forms API
Slide 21
Slide 21 text
Using the custom form control
export interface ControlValueAccessor {
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState?(isDisabled: boolean): void;
}
Slide 22
Slide 22 text
Demo 2
Creating reusable form control
using the ControlValueAccessor interface
Slide 23
Slide 23 text
And…THAT’ IT!
Slide 24
Slide 24 text
Reusable Form
Slide 25
Slide 25 text
Now we got this…
Slide 26
Slide 26 text
Objective 2- reusable form
Requirements:
• Create an Address form which can be reused.
• Implement the form - UI, controls, Validations - just
once.
Slide 27
Slide 27 text
Demo 3
Reusable form with the ControlValueAccessor
Slide 28
Slide 28 text
Sub forms
Slide 29
Slide 29 text
Demo 4
Sub forms
Slide 30
Slide 30 text
• The ControlValueAccessor as a bridge between Angular forms API to
our custom controls and reusable forms.
• How the DI can help us to inject the NgControl in order to get the
control reference.
• How we can leverage the DI to create sub forms.
Summary