Generic forms
•Download as PPTX, PDF•
0 likes•196 views
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.
Report
Share
Generic forms
- 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?
- 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
- 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