The document discusses creating custom form components in Angular. It describes implementing the ControlValueAccessor interface to build a reusable text input component that can handle validation. It also explains how to create a custom form component that wraps an existing form group using the FormGroupName directive and ControlContainer. By injecting FormGroupDirective and setting the local form to the control container form, a custom component can reuse an entire form group.
2. About mySelf
• Experienced Front End
developer, specialized in
B2C applications.
• Front End Team Lead @
Market.co.uk
• Weekends FE developer @
fashbash.co
9. Let’s build our
own custom
component!
•Requirements:
• Can show text fields
• Can fit for type text and
password
• Can Validate on required and
pattern
• Can show error messages
16. How to our FormControl
• Injecting FormControlName, NgModel are options, but….you will tie
yourself to only one of them…
• NgControl is the super class of all the forms derctives: NgModel,
FormControlDirective and FormControlName.
• Why are we using the @Self decorator? Avoid providing the wrong
instance.
17. How to our FormControl
• Just don’t forget to remove the providers – NgControl will provide
them for you.
21. • We can do it by implementing the controlValueAccessor again for our
wrap form
Now we want to re-use the whole form
22. • We can do it by implementing the controlValueAccessor again for our
wrap form
Now we want to re-use the whole form
23. But…There is maybe a quicker approche
• Start from add ControlContainer to your ViewProviders as
FormGroupDirective
• Why we using viewProviders and not the usual Providers?
24. FormGroupName directive
@Host() - Specifies that an injector should retrieve a dependency from any injector until
reaching the host element of the current component.
25. Now we want to re-use the whole form
• Then – inject the FormGroupDirective and set you local form to the
control container form
@Host() - Specifies that an injector should retrieve a dependency from any injector
until reaching the host element of the current component.
26. Now we want to re-use the whole form
Now you can setup you form and set validations
27. And…let’s actually use it
Our market-address-form will become a formControl inside our
addAddressForm formGroup!
29. Last second remarks
• Slides and git repo will be shared in the meetup comment
• Stay tuned – we starting a new monthly workshop @ Market
• Wanna join us?
• Keep in touch – eliran.eliassy@gmail.com