How to Make Forms in Angular REUSABLE (Advanced, 2023)

‎Advanced Angular Forms Course 🚀

Forms in Angular are crucial features that we can't avoid in our applications. It happens so often that we have to reuse some form controls or even entire form control groups within our applications. However, it is not as straightforward as it seems because the design of Angular Forms doesn't allow you to simply extract things in a separate component. In this video, I will show you how to reuse forms and not suffer from unnecessary boilerplate.

I hope you will like the video and if so, please share it with your friends and colleagues. Enjoy!

💁 If you want to support the channel:

💁 Source code of the tutorial

💡 Short Frontend Snacks (Tips) every week here:

🕒 Time Codes:
00:00:00 - Intro;
00:01:11 - Standard Solution;
00:05:20 - FormControlName directive internals;
00:09:53 - Making Form Group Reusable;
00:18:28 - Advanced Angular Forms Course Overview;
00:20:09 - How to support the channel/outro;

#angular #webdevelopment

[DecodedFrontend]

‎Advanced Angular Forms Course - Limited 10% Discount Applied 🚀

💁 Follow Me:

[aissa.bouguern]

High quality content!
Angular community is lucky having you!
Keep up the good work!

[praecantato]

the best angular teacher in the whole youtube

[ЗахарЛевчук-шю]

Хорош мужик. Є відос майже на кожну проблему з якою стикався в Ангулярі яку він ще глибоко пояснює.

[figureskatinglessons]

Дуже корисне відео, дякую, Дмитро! Дізнаюся багато нового із ваших відео, туторіали зрозумілі, актуальні, дуже подобається ваш канал!

[hollow_ego]

Since this video came out I used this approach in two projects and I really love it.

One thing that is missing for pretty much all dynamic form videos, tutorials and courses is to be able to dynamically hide or show a control based on another ones value. If you happen to know a solid solution for that, please make a video or add it to your course. In your course you already have a section about creating a form based on a json, but no way of adding conditions for visibility. I found a working solution, but it relies on mutability.

For those wondering: I'm using a signal to hold the config of the form which includes a visibility state as well as conditions on when to show certain fields. Then I'm building a form based on that condition using the approach from this video. That way we can keep markup and from group in sync. Then I'm listening to value changes on the form group and look for any controls that might need to be updated. I then set their visibility to either true or false. However, since my config can be deeply nested I'm extracting all controls, that dependent on a another one, into a computed signal. I use this as a base to find controls to check and modify.

[jsmn]

so thankful for this awesome content ! greetings from Egypt

[amosisaila]

Best Angular youtuber. Congratulations on your channel. Keep going the great work!

[DmitryEfimenko]

Good little dive into intervals - the ControlContainer, but honestly, it looks like you are on your way to reinvent the wheel - namely the template driven forms

[vinaykadam]

Great video! It solved my split form issue. However, do you mind addressing the test case for this as well?

[Masonc]

Amazing video as always. I appreciate what you do and wouldn’t be where I am today without your help!

[YDG]

Thanks for the great tutorial. I have been trying to do this cleanly for a long time !
Would be interesting to have some testing strategies for the subform component, as it needs to be part of a encapsulating formgroup to be functionnal.

[pawe]

its quite hard to understand at first, because im using angular first time, only for my project and i dont consider myself front-end developer. But even though i can quite understand what you are doing. Your explaining REALLY makes a difference (for example Host directive, passing ControlContainer by provider).

I used to pass the form around to huge component hierarchies... I didn't know you could avoid it. I'll never struggle again, thanks so much!

[davidgarciasantes]

Nice video, I will investigate this solution in more detail, thank you continue as well 💪

[Matzul]

What is next and very challenging is when you have Form Array:
1. Edit mode - you have database data which needs to populate the child reactive form array. Or not if we are in Add mode.
2. Send additional data to child component. Ex: Form array object has select box which requires some database objects and also determine values of another control in that Form Array.
In the end you have two @Input, the edit mode array from database and additonal values for select box, which need to communicate with parent form group.
I don't know if I will find this in the course. Nevertheless, thank you! Best one yet!

[Nabulio]

Once again, thank you very much for this excellent video. The explanations are precise and very well illustrated. You are the boss.

[yukipuki]

best advanced angular tutorials on youtube, high quality content. You cover advanced concepts in an understandable way. i am absolutly grateful for your service to the community
I will definitly buy the forms course ;)

[renkzk_dev]

You've got some of the best content on Angular, thank you

[diglettt]

Ok, you're awesome. Not often people make me subscribe them, keep it up!