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

I am working on a project which uses angular 10, how should I provide the ControlContainer in viewProviders ? I am not able to figure out how can I solve the circular dependency error.

Awesome!

Signed up to the course

Interesting idea. What about a template-driven forms?
Does this approach only work with reactive forms?

Hello. Thank you for video. I have one question about this way to use form. What about typed of parent form? If we get value of parent form we know that we have additional key and value but typescript doesn’t know. Please correct me if i am wrong

Great content, best regards from Cuba.

With that way, Control value accesor is not necessary?

we just use [formControl] Syntax on the Inputs and it works like a charm, there is no need for reference to the parent formgroup. why is that?

Hey 👋🏻 Thanks for sharing. I just curious how does it work with typed forms? 🤔

Now this video has lessons on it.

Based on this I just trimmed an HTML file that had about 2500 lines down to 741.
Thanks @Dymytro :)

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

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

Thank you. very useful content.

Really thank you man! greatings from Argentina! have a nice day!

We have a parent component with several child components, several of which are further nested, and it's ReactiveForm. Instead of implementing CVA for every child component, or using Inputs/Outputs, we are using FormGroupDirective. So into every child component, that is a part of the form, we inject the FormGroupDirective and add the control to the parent form. Have you seen this approach? I would like to double-check somewhere whether this approach is okay and not breaking good practices :D And what would be a better approach, FormGroupDirective or your in the video?

is there a git link for the code? Fantastic tutorial btw

@DecodedFrontend we have built a reusable set of form components, where one single input field with label and error message is represented by one component. E.g. text-input, text-area, checkbox-group and so on.

So far, we passed in the reference to the form like at the begin of your video. I will definitely try your approach. Another problem with the Child Components is, that we cannot use change detection stragety onPush in the child componentes (e.g. in text-input component) because then, the form control within the child component does not seem to get notified about the parent form having been submitted and the validation state of the form control changed.

Do you have an idea how that problem could be solved?

I was wondering, how do we unit test this in jasmine?

This solution work with FormArray? If it’s not difficult, show in the next video how this is implemented, thanks

Hi! Thanks you for share this amazing feature. I 've two questions.

I use this approach to create reusable input field (text/email/number and so on), select, radio etc... The <form [formGroup]="blablaForm"> reside in separate file and pass in input [controlKey], to the inputFiled component ([formControlName]="controlKey") and the magic appear.

So the question is, what do you think about my solution? It's overkill? There is a simple one solution?
Can I ask you what you think about compare your solution with the FormGroupDirective for create reusable form?

I was just about to comment “why not use ControlValueAccesor”… when I realized that you are not declaring the deliveryAddress form control/group in the parent component. This is so cool and makes this even more easy to reuse. Awesome lesson! I really have to get your forms course!

why formControlName don't have exportAs ?

Amazing content bro great job … 🎊 🎉

shows me an error
Cannot read properties of undefined (reading 'addControl')
at AddressgroupComponent.ngOnInit

parentFormGroup is undefined.

Not a fan of this teaser video...

Most junior developers will think that it is acceptable to do this ugly inecjection of the parent formGroup and adding the control dynamically instead of using ControlValueAccessor.

I love your videos but this one gets a thumb down.

another great video, Thanks

Great video

Another cool video, or should I say: a missing part of Angular docs! I finally understood the resolution decorators Thanks!. Given that the main form model (in this case: AppComponent) is incomplete (the remaining fields are dispersed across other components), how is this going to work with strongly typed forms? Also, if I wanted to author a form AddressGroupComponent that is usable in both ReactiveForms and template driven forms - would I have to author two separate components? I think Angular forms got a bit neglected over time.

❤

Avto already did it

Hello @DecodedFrontend, your advanced concepts videos are very helpful. Can you please create a tutorial on how to build a Realtime Video chat web app in Angular 14 using webrtc protocol.

@DecodedFrontend FormArray example would be much appreciated as well :)

It would be great to make a video about accessability. like how to change font-size for the whole application.

Thank you Dmytro, you're producing a really great and unique piece of content.
Secondly, although I really like this approach in some cases, I wonder if it doesn't break the typed forms. What if I would like to have a multistep form (order) with items and addresses as separate form groups? I would like to know it upfront, validate everything etc. And with this approach the starting form group has only single field. I feel CVA would be a better choice.
So my question - is there a way to use type in root component with the approach you demonstrated?

I dynamic pass form control name and label ita possible

Thanks you for the video.
Please make a video for creating inline-editing feature for angular material table

This was useful indeed Dmytro, thank you! One little thing is NgFrom is also ControlContainer provider and implementor, not only NgModelGroup when talking about TDF

Я недавно чуть не цілий день потратив. Знайшов інше рішення, але це виглядає набагато краще)

why not to use FormGroupDirective and saving the hassle?
This way we make the sub form auto injected

Cool! Thank you!

Stellar!

Interesting. Won't id's 'zipcode' and 'address' be copied too though and violate valid html? How would you handle that, if it's a problem? Or why is it not?

I have bought the advanced course :D It seems amazing!!!

that's awesome, thank you.

Thanks for the lesson, it is really cool.
Is it possible to use the same approach without adding a new FormGroup, but add just one control to the parent FormControl?

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

oof, this was pretty slick! thanks for this!

Is there a translation option on the course platform?
My English is still very basic.