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.

1. Generic Forms
Eliran Eliassy

2. About mySelf
• Experienced Front End
developer, specialized in
B2C applications.
• Front End Team Lead @
Market.co.uk
• Weekends FE developer @
fashbash.co

3. Where it all starts

4. Did you ever duplicate code of the same form?

5. Let’s wrap the input inside component?

6. Let’s wrap the input inside component?

8. Introducing ControlValueAccessor interface

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

10. Live coding…

11. Create your custom-input component

12. Implement ControlValueAccessor

14. Let’s handle validations

15. Don’t forget to add the providers

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.

18. Validate considering base class validators

19. Show the errors on the template
Keep in mind
the async
state

20. And….That’s it!

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!

28. And….That’s it!

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