Create a Dynamic Angular Form with ngx-formly

Share this video with your friends

Send Tweet

In our dynamic forms lessons we obviously didn’t account for all the various edge cases you might come across. Therefore if you need a more complex setup you might want to take a look at ngx-formly. Formly has been a very popular library even in AngularJS 1.x for rendering dynamic forms.

Ngx-formly is the Angular (2+) counterpart for doing this job. In this lesson we’ll quickly give it a look at how to transform our custom dynamic form rendering to use ngx-formly. For more use cases definitely check out this Configuration based reactive Angular Forms with ngx-formly collection and official ngx-formly repository on GitHub.

Jerome
~ 6 years ago

This is an awesome course on getting your head around taking advantage of dynamic form generations. Thank you Juri. My only worry about using ngx-formly is adding another level of abstraction on top of it and losing some of the customization capabilties. Any concerns about that?

Juri Strumpflohnerinstructor
~ 6 years ago

hey Jerome. totally understand what you mean. for simple things you can definitely roll your own form generation mechanism as I've sown in this course. For more complex things however I tend to ngx-formly. This video here just gives a very rough overview. Actually just this week I started to dive deeper into ngx-formly as I'm evalualing to use it more heavily in one of our projects. That said, it's really powerful what I've seen so far. I'll know more however in the next couple of weeks. In case connect with me on Twitter. pretty sure I will post some stuff there, some blog articles & maybe even some in-deep egghead lessons ;)

Jerome
~ 6 years ago

Thank you for the quick reply. I really appreciate the feedback. I have a very specific case for a client/project I am working on right now where I thought your lesson would be a perfect match until... I have to handle cascading logic between various elements of a dynamic forms, meaning cascading lists, displaying fields and/or data based on previous selections. Overall, business logic mixed with dynamic forms... which does not seem to be easy. From your experience, should I try ngx-formly or try to roll my own? Thanks again for a great and concise course. Cheers.

Juri Strumpflohnerinstructor
~ 6 years ago

I'd give ngx-formly a go. Like experiment with it for half a day or day to see how far you come to prototype your use case. As said, I'm currently doing exactly the same, to see whether it's flexible enough. And so far I'm quite satisfied tbh.

Michael
~ 5 years ago

Juri, any chance you'll do a course on the latest ngx-formly version ?

Juri Strumpflohnerinstructor
~ 5 years ago

@Michael Hey, yes, it's been in the planning for a while and my goal is to release it in the next 2 months. It'll be probably a custom playlist on Egghead here (just as this one: https://egghead.io/playlists/build-performant-and-progressive-angular-applications-78032ff5). Just keep an eye around here. I'll also announce it on my Twitter (https://twitter.com/juristr) or on my tech news (https://juristr.com/newsletter).

Stay tuned 💪

Michael
~ 5 years ago

Fantastic !!!

JMONER
~ 4 years ago

Hi, is it possible to add more then one Validators? For example a required and a pattern...

Juri Strumpflohnerinstructor
~ 4 years ago

@JMONER sorry for the late reply 🙏. Of course you can. I actually created an entire series on Formly for Egghead which you can find here: https://egghead.io/playlists/configuration-based-reactive-angular-forms-with-ngx-formly-465f

You can also read about validations on the official formly docs: https://formly.dev/examples/validation/built-in-validations

~ 2 years ago

Great job @Juri Strumpflohner. Now I can take the Frmly course with a basic knowledge of what is going "under the hood"!