Split an Angular Reactive Form model into child components 

The ControlValueAccessor (CVA) is the glue between an HTML control and an Angular component so that you can convert the latter into an Angular Form Control. We can use the CVA even for splitting the forms, but it requires more boilerplate code, and it makes it hard (or even impossible) to have validations where one component should affect another component. I use the CVA when I need to reuse the same Form Model in more than one place in my application. I hope this answers your question :)

But purpose of CVA is same as this one or is it different altogether?

@@Powerful-Manifestor- it depends on weather you want your child component to act as a whole entity of a form or not (does it make sense to have dirty? Setter? ... ) if it's just a composition of fields as on the video probably not. I would use CVA when my field is a reusable component like a datepicker, or a star rating input, or other "complex enough" inputs I can reuse in a form. I hope that helps

@@Powerful-Manifestor- CVA is the right way to create truly reusable components. The method shown in the video of passing the child FormGroup instance from parent to child component via FormGroupDirective injection in the child component tightly couples the child to the parent component. I think the point of creating custom FormControl/FormGroup components by "implementing CVA" (e.g. export class CustomFormControlComponent implements ControlValueAccessor) is so that you can hook into functionality (by implementing methods of the CVA interface) called by the Angular Forms API to define your own custom logic when binding these methods your CustomFormControlComponent (which wraps a native input element). Then you can use your own CustomFormControlComponent exactly like how you would use an input component because you have binded the Angular Forms API to your component just like how Angular binds it to an input element (e.g. for using this Custom Component with Reactive Forms, you would use the formControlName directive on it). The methods to implement are writeValue, registerOnChange, registerOnTouched and setDisabledState. For example, the registerOnChange method that you have to implement is called by the Forms API to pass to your custom component property a callback function, OnChange (the Forms API handler for value changes in the View), which you can call anywhere/anyhow - you would usually just bind this to the wrapped input element like this (input)="onChange($event.target.value)" so that it's called when user interacts with the input. CVA does have a bunch of boiler plate because you have to implement the above four methods, but it's the standard way for creating custom and reusable FormControl components because it literally replaces the usage of native input elements. The same idea also work for custom FormGroup components (use with formGroupName directive), and you could also do the same thing with template-driven forms. I think that without implementing CVA and just creating a custom FormGroup component the way shown in the video, you don't have the ability to customize when/how your custom FormGroup component calls the Forms API OnChange function. The best you can do is subscribe to the valueChanges observable of the FormGroup to do something. But the real deal breaker is that the custom child component shown in the video is tightly coupled to the parent component because the FormGroup model that is binded to the child component's view, is actually defined in the parent component - so you can only reuse this child component in this parent component, but not in other parent components.

Thanks for your feedback and glad you liked it :)

Thanks for your feedback :) Glad you liked it!

Thanks for your feedback and glad you liked it :)

Thanks a lot for your feedback and glad you liked it :)

Glad you liked it. Thanks for the like and the subscription :)

Same. Excellent job. Thank you.

Glad you liked it!! :)

Glad it helped you :)

Thanks for your feedback Julia and I am really happy my channel is useful for you!!

It's hard to explain in a few lines. However, say that we have a parent child component pattern. If we inject the parent class in the children component, we will have the parent instance in the children component (I haven't tried this with ivy). Similarly, when we use the formGroupDirective we have access to the instance of the **root** component. I hope this answers your question.

Glad you liked it!

Thanks for your warm feedback. Glad you liked it!

Yes, exactly! :)

Perhaps you can do this by injecting the formGroups using an @input I wrote an article that explain pretty much this approach blog.profanis.me/blog/smart-dumb-in-nested-reactive-forms I hope you will find this approach useful

Thanks for your feedback! Can you check this stackblitz and let me know if this is what you are looking for? stackblitz.com/edit/user-registration-with-fgd?file=src/app/user-registration/user-registration/colors/colors.component.ts

Glad you liked it! :)

Glad you liked it :)

Thank you Madhu!! I am glad you liked it and I appreciate your feedback! 😊🙏

Glad it helped you!

Thanks for your feedback. Noted!

Thanks a lot @gowtham! Glad you liked it and thanks for the feedback 😊

Glad you liked it :)

😊😊

You are welcome!

You can find a solution to this on the following stackblitz stackblitz.com/edit/user-registration-with-fgd?file=src/app/user-registration/user-registration/user-registration.component.ts

@@CodeShotsWithProfanis awesome, thanks. that help a lot.

Yay! Thank you!

Glad you like it! :) I'll consider creating a video with the extensions I use. They increase the productivity after all ;)

Surely they will increase productivity. The one I noticed (next to the imports) will reduce the bundle size. I didn't know even the existence of this awesome extension.

Glad you liked it :)

In case you haven't already checked it out, the typed forms have been released in Angular 14 and I have a video for this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uME4etc8IsU.html

Thanks! 👐 You can apply the patchValue in the master component and will work just fine :) If you use this just after the userForm initialization, will fill in the relevant fields. this.userForm.patchValue({ basicInfo: { firstName: 'Fanis', }, address: { company: 'code shots with profanis', }, }); Since the API returns an observable, then you can wait for the data and apply the patch value in the subscription

Thanks a lot! :) You can create a custom form control by implementing the ControlValueAcccessor interface. In this video you can see how to do it ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WGU-DnhpsA0.html

Glad you liked it ☺️☺️

Thanks a lot for the feedback! I'll plan to create one explaining the validations as well :)

Actually we didn't remove it, but, we moved it from the children component to the parent one. Having the formGroupName in the children component, although it serves the purpose, it's a bit transparent to the host/parent component and has no control of it. Please let me know if this is what you were asking

@@CodeShotsWithProfanis yes but in video, you said, keeping it in child component, it is not linked to the form, which was slightly confusing since everything was getting updated and reflecting in the printed form object.

@@Powerful-Manifestor- you are right that even if we have it in the children component, it will work just fine. All I wanted to highlight is the approach of allowing the parent component control the name of the group. I hope that it is clear :)

@@CodeShotsWithProfanis Yes. Thank you so much for your prompt response. :) Have a great day!

Your approach works fine! Other approaches you could consider are: - A parent page has several children routes. Each child uses a FormGroupDirective to get access on Parent's form. With this approach you are storing form's values in the parent form. - A parent page via DI registers a parent FormGroup which will store all form's values. Each component route can use this DI Token and use it as the main FormGroup to store related form data. The approaches above are alternatives to what you have already implemented I hope this answers your question :)

@@CodeShotsWithProfanis thanks for the help!

Glad it was helpful! :)

Glad you enjoyed it!

Thanks! :) You can use this setting in your VSCode settings.json file "typescript.inlayHints.parameterNames.enabled": "all"

You are welcome!! :)

I am not sure I have fully understand the case you are describing. As I do not want to give an answer to a wrong question, can you please elaborate a bit more?

@@CodeShotsWithProfanis Is it possible nest form which is app.component in another form.

@@TheTomyG You can achieve this by using the ControlValueAccessor. In this stackblitz I have a similar example stackblitz.com/edit/user-registration-with-cva?file=src/app/user-registration/user-registration/user-registration.component.html

@@CodeShotsWithProfanis Thank you very much 🙏🏻

I will have a look at this error and I'll publish video. Thanks!

You are welcome!

Thank you Vlasis!!

You are correct! The ngSubmit is an event of the form element, and so, you have to replace the with a tag. Let me know if this works for you :)

Thanks Connie 🙏 To apply a binding it's important to define the path of the nested formGroup. Having said that we provide in the formGroupName directive (without the brackets) the string value "address". When we use brackets in a directive, Angular tries to interpolate the right side. In our case, we provide a string value and not a variable. Hence, it's safe not to use the brackets. I hope this answers your question

I use Dracula

I guess you want a solution to handle individual form elements. If so, please refer to this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WGU-DnhpsA0.html

I would approach this by creating either an abstract class component and extend both the parent and the children components with this class, or to move the function in a service and inject this service wherever is required

@@CodeShotsWithProfanis Thanks! It worked by injecting error service into parent and also child.

Thanks Ebert! :)

That's really interesting. Thanks for posting it. I'll give it a try with Angular 13 and perhaps I'll upload an update

I'm in the same situation using Angular 16, how could we fix this? @@CodeShotsWithProfanis