Split an Angular Reactive Form model into child components

Split an Angular Reactive Form model into child components

Code Shots With Profanis

3 года назад

31,053 Просмотров

In this video, we will see how to split a big Angular Reactive Form model into child components.
Splitting a big component into several components increases maintainability.

The class type of the [formGroup] directive is FormGroupDirective. When a parent element is bound with a directive, the children of this element can inject the class type of the directive and use the created instance. In this video, each child component uses the FormGroupDirective of the parent component.

For more in-depth info, please check this link https://blog.profanis.me/blog/reactive-forms-in-parent-child-components

Code: https://github.com/profanis/codeShotsWithProfanis/tree/7/splitAFormUsingFGD

✨✨
Interesting in learning more about Reactive Forms? Check out my book for more in-depth info and explanation https://www.amazon.com/Mastering-Angular-Reactive-Forms-Validators-ebook/dp/B09CD367TY
✨✨

#angular #ReactiveForms #formmodel #form

Тэги:

#Split_an_Angular_Reactive_Form_model_into_child_components #Angular #Angular_component_form #Angular_form_child #Angular_form_children #Reactive_Forms #Refactor #angular #angular_forms #angular_forms_tutorial #angular_tutorial #angular_tutorial_for_beginners #child_components #form_model #learn_angular #split_a_form #split_an_angular_reactive_form #reactive_forms_child_components #Angular_child_components
Ссылки и html тэги не поддерживаются


Комментарии:

Riaz
Riaz - 24.03.2021 02:49

Really valuable lesson to learn Reactive Form deeply, But there is one question i want to
ask, I am learning Angular for last 3 months, What is the difference between implementing
the ControlValueAccessor and Implementation in this video way of doing it, is this way
completely compatible with the Forms Api, we can react
to all the Angular provided Reactive Form's states, if it is valid, touched etc?
I like this way of splitting the Forms and it's more simple

Ответить
BarrettGaming
BarrettGaming - 13.10.2023 18:59

Awesome video thanks a lot

Ответить
sebastien baudet
sebastien baudet - 30.09.2023 16:36

Very good tutorial thanks

Ответить
Douglas Carneiro
Douglas Carneiro - 01.06.2023 20:29

This is pure gold. Thank you so much!

Ответить
Luis Alberto Cevallos Cavero
Luis Alberto Cevallos Cavero - 30.05.2023 17:46

Hi thanks for the video please how can make validations in this way with validators required.. thanks

Ответить
hitesh suthar
hitesh suthar - 30.05.2023 06:17

Thanks

Ответить
Timofei Iurov
Timofei Iurov - 19.05.2023 00:34

Thanks a lot! You saved around a week to me! ❤

Ответить
ANDRES PATRICIO ESPINOZA DELGADO
ANDRES PATRICIO ESPINOZA DELGADO - 05.05.2023 04:25

Hi! nice video, very useful. I'm trying to create a complete dummy form component, that recieve all the logic (input labels, FormControl
FormGroup, onSubmit) from the parent. How can I connect the parent with the child? this is really simple in React, but it looks like imposible in Angular.

Ответить
Gamza
Gamza - 10.03.2023 18:25

i like you!!

Ответить
Vivekraj K R
Vivekraj K R - 09.02.2023 10:03

Hey, Great tutorial! Just wondering how do we access formControl when we have multiple nested components? For eg: 3 levels of nesting.

Ответить
Вікторія С
Вікторія С - 19.01.2023 16:24

so helpful was for me!thank you a lot)the explanation is fantastic )

Ответить
Luis Alberto Cevallos Cavero
Luis Alberto Cevallos Cavero - 21.12.2022 23:43

Thanks .. how do you set up your vscode please you can share your settings in a video please.. thanks

Ответить
Baturhan Kahraman
Baturhan Kahraman - 23.11.2022 20:02

What a hero...

Ответить
Shubham Agarwal
Shubham Agarwal - 13.11.2022 22:47

This was a gem video 🎉✨
Thanks for sharing ❤️

Ответить
Francesco Petraroli
Francesco Petraroli - 18.10.2022 15:17

Great tutorial, the only thing i've always struggled is the validation. I was never able to mark a control as touched in the parent and triggerthevalidatio required in the children.

Ответить
frnathant
frnathant - 11.10.2022 04:05

Thank you - very clear! What if you only want to pass a single control to the child component and not a FormGroup? Edit: Nevermind! I see you responded to a similar question below. Looks like I need to implement a ControlValueAccessor.

Ответить
TauwinKul
TauwinKul - 09.09.2022 22:32

Thank you very much for the video and the source code.

Ответить
Alexander Finkbeiner
Alexander Finkbeiner - 23.08.2022 10:17

thanks!

Ответить
Sunil SA
Sunil SA - 01.08.2022 21:21

For me it's not working when I try to implement in Angular 13 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SESUModule)[FormGroupDirective -> FormGroupDirective -> FormGroupDirective -> FormGroupDirective]:
NullInjectorError: No provider for FormGroupDirective!
NullInjectorError: R3InjectorError(SESUModule)[FormGroupDirective -> FormGroupDirective -> FormGroupDirective -> FormGroupDirective]:

Ответить
Royer Adames
Royer Adames - 20.07.2022 06:17

Really great. Thank you

Ответить
alk3mik
alk3mik - 18.07.2022 04:54

Very nice! I’m gonna give a try very soon. If it’ll work for me too, I can say you made my day :) thank youuu!

Ответить