[et_pb_section fb_built=”1″ fullwidth=”on” admin_label=”Header” _builder_version=”4.20.0″ use_background_color_gradient=”on” background_color_gradient_direction=”163deg” background_color_gradient_stops=”rgba(0,0,0,0.02) 50%|#ffffff 50%” background_color_gradient_start=”rgba(0,0,0,0.02)” background_color_gradient_start_position=”50%” background_color_gradient_end=”#ffffff” background_color_gradient_end_position=”0%” background_image=”https:\/\/kamil-abzalov.com\/wp-content\/uploads\/2021\/12\/web-dev-03.png” parallax=”on” animation_style=”fade” collapsed=”off” global_colors_info=”{}”][et_pb_fullwidth_header title=”Reactive forms in Angular” content_max_width=”640px” _builder_version=”4.27.5″ title_font=”Roboto|700|||||||” title_line_height=”1.5em” content_font=”Roboto||||||||” content_font_size=”16px” content_line_height=”2em” subhead_font=”|700||on|||||” subhead_font_size=”14px” subhead_letter_spacing=”2px” subhead_line_height=”2em” background_color=”rgba(0,0,0,0)” custom_button_one=”on” button_one_text_size=”14px” button_one_text_color=”#ffffff” button_one_bg_color=”#0054ff” button_one_border_width=”14px” button_one_border_color=”rgba(0,0,0,0)” button_one_border_radius=”0px” button_one_letter_spacing=”2px” button_one_font=”|600||on|||||” button_one_icon=”9||divi||400″ button_one_on_hover=”off” custom_button_two=”on” button_two_text_size=”14px” button_two_text_color=”#0054ff” button_two_bg_color=”rgba(255,255,255,0)” button_two_border_width=”12px” button_two_border_color=”rgba(0,0,0,0)” button_two_border_radius=”0px” button_two_letter_spacing=”2px” button_two_font=”|600||on|||||” button_two_icon=”9||divi||400″ button_two_on_hover=”off” background_layout=”light” custom_margin=”|||” custom_padding=”6vw||6vw||false|false” animation_style=”zoom” animation_intensity_zoom=”-5%” title_font_size_tablet=”” title_font_size_phone=”25px” title_font_size_last_edited=”on|desktop” box_shadow_style_button_two=”preset1″ box_shadow_vertical_button_two=”0px” box_shadow_blur_button_two=”0px” box_shadow_spread_button_two=”2px” box_shadow_color_button_two=”#0054ff” button_one_letter_spacing_hover=”2px” button_two_letter_spacing_hover=”2px” global_colors_info=”{}” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”2px” button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”2px” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.21.2″ _module_preset=”default” collapsed=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=”Home” hide_currentbreadcrumb=”off” _builder_version=”4.27.5″ hover_enabled=”0″ fontsbreadcrumbs_font_size_tablet=”51″ fontsbreadcrumbs_line_height_tablet=”2″ fontsseperator_font_size_tablet=”51″ fontsseperator_line_height_tablet=”2″ fontsbreadcrumblinks_font_size_tablet=”51″ fontsbreadcrumblinks_line_height_tablet=”2″ z_index_tablet=”500″ fontsbreadcrumbs_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumbs_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumbs_text_shadow_blur_strength_tablet=”1px” fontsseperator_text_shadow_horizontal_length_tablet=”0px” fontsseperator_text_shadow_vertical_length_tablet=”0px” fontsseperator_text_shadow_blur_strength_tablet=”1px” fontsbreadcrumblinks_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=”4.27.5″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
In the previous video we’ve discussed template driven forms in Angular. In this tutorial we will discuss reactive forms.<\/p>\n
[\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/EumLqF0C5Is” _builder_version=”4.27.5″ global_colors_info=”{}”][\/et_pb_video][et_pb_text _builder_version=”4.27.5″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]Reactive forms are more convenient for handling large forms and the relationships between form fields. For example, address fields can be part of a larger registration form. With reactive forms, you can react to changes in form controls and implement logic based on those changes (for example, validate the zip code based on the selected country).<\/p>\n
The key classes of reactive forms are FormGroup (the form container), FormControl (a class for a particular control), FormBuilder (a class to quickly create controls), and FormArray (useful for dynamically adding controls).[\/et_pb_text][et_pb_dmb_code_snippet title=”app.ts” code=”aW1wb3J0IHtDb21wb25lbnQsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7CmltcG9ydCB7CiAgRm9ybUJ1aWxkZXIsCiAgRm9ybUNvbnRyb2wsCiAgRm9ybUdyb3VwLAogIEZvcm1zTW9kdWxlLAogIE5vbk51bGxhYmxlRm9ybUJ1aWxkZXIsCiAgUmVhY3RpdmVGb3Jtc01vZHVsZSwKfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7CgppbnRlcmZhY2UgTG9naW5Gb3JtR3JvdXAgewogIGxvZ2luOiBGb3JtQ29udHJvbDxzdHJpbmc+OwogIHBhc3N3b3JkOiBGb3JtQ29udHJvbDxzdHJpbmc+OwogIGFkZHJlc3M6IEZvcm1Hcm91cDxBZGRyZXNzRm9ybUdyb3VwPjsKfQoKaW50ZXJmYWNlIEFkZHJlc3NGb3JtR3JvdXAgewogIHN0cmVldDogRm9ybUNvbnRyb2w8c3RyaW5nPjsKICB6aXBDb2RlOiBGb3JtQ29udHJvbDxzdHJpbmc+Owp9CgpAQ29tcG9uZW50KHsKICBzZWxlY3RvcjogJ2FwcC1yb290JywKICBpbXBvcnRzOiBbCiAgICBGb3Jtc01vZHVsZSwKICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUKCiAgXSwKICB0ZW1wbGF0ZVVybDogJy4vYXBwLmh0bWwnLAogIHN0eWxlVXJsOiAnLi9hcHAuc2NzcycKfSkKZXhwb3J0IGNsYXNzIEFwcCBpbXBsZW1lbnRzIE9uSW5pdCB7CgogIHByb3RlY3RlZCBmb3JtITogRm9ybUdyb3VwPExvZ2luRm9ybUdyb3VwPjsKCiAgLy8gcHJvdGVjdGVkIGZvcm06IEZvcm1Hcm91cDxMb2dpbkZvcm1Hcm91cD4gPSBuZXcgRm9ybUdyb3VwPExvZ2luRm9ybUdyb3VwPih7CiAgLy8gICBsb2dpbjogbmV3IEZvcm1Db250cm9sPHN0cmluZz4oJycsIHsKICAvLyAgICAgbm9uTnVsbGFibGU6IHRydWUsCiAgLy8gICAgIHZhbGlkYXRvcnM6IFtWYWxpZGF0b3JzLnJlcXVpcmVkXSwKICAvLyAgIH0pLAogIC8vICAgcGFzc3dvcmQ6IG5ldyBGb3JtQ29udHJvbDxzdHJpbmc+KCcnLCB7CiAgLy8gICAgIG5vbk51bGxhYmxlOiB0cnVlLAogIC8vICAgICB2YWxpZGF0b3JzOiBbVmFsaWRhdG9ycy5yZXF1aXJlZF0KICAvLyAgIH0pCiAgLy8gfSk7CgogIGNvbnN0cnVjdG9yKHByaXZhdGUgZm9ybUJ1aWxkZXI6IE5vbk51bGxhYmxlRm9ybUJ1aWxkZXIpIHsKICB9CgogIHB1YmxpYyBuZ09uSW5pdCgpIHsKICAgIHRoaXMuZm9ybSA9IHRoaXMuZm9ybUJ1aWxkZXIuZ3JvdXA8TG9naW5Gb3JtR3JvdXA+KHsKICAgICAgbG9naW46IG5ldyBGb3JtQ29udHJvbDxzdHJpbmc+KCcnKSwKICAgICAgcGFzc3dvcmQ6IG5ldyBGb3JtQ29udHJvbDxzdHJpbmc+KCcnKSwKICAgICAgYWRkcmVzczogbmV3IEZvcm1Hcm91cDxBZGRyZXNzRm9ybUdyb3VwPih7CiAgICAgICAgc3RyZWV0OiBuZXcgRm9ybUNvbnRyb2w8c3RyaW5nPignU3RyZWV0JyksCiAgICAgICAgemlwQ29kZTogbmV3IEZvcm1Db250cm9sPHN0cmluZz4oJzEyMzQnKQogICAgICB9KQogICAgfSkKICB9CgogIHByb3RlY3RlZCBzdWJtaXRGb3JtKCkgewogICAgICBjb25zb2xlLmxvZyh0aGlzLmZvcm0udmFsdWUpOwogIH0KfQo=” copy_button=”on” copy_button_tooltip=”\u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434” _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”app.html” code=”PGZvcm0gW2Zvcm1Hcm91cF09ImZvcm0iIChuZ1N1Ym1pdCk9InN1Ym1pdEZvcm0oKSI+CiAgPGRpdj4KICAgIDxsYWJlbCBmb3I9ImxvZ2luIj5Mb2dpbjwvbGFiZWw+CiAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImxvZ2luIiBuYW1lPSJsb2dpbiIgZm9ybUNvbnRyb2xOYW1lPSJsb2dpbiI+CiAgICBAaWYoZm9ybS5jb250cm9scy5sb2dpbi50b3VjaGVkICYmIGZvcm0uY29udHJvbHMubG9naW4uaGFzRXJyb3IoJ3JlcXVpcmVkJykpIHsKICAgICAgPHNwYW4+SW52YWxpZCBjb250cm9sIHZhbHVlPC9zcGFuPgogICAgfQogIDwvZGl2PgogIDxkaXY+CiAgICA8bGFiZWwgZm9yPSJwYXNzd29yZCI+UGFzc3dvcmQ8L2xhYmVsPgogICAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIG5hbWU9InBhc3N3b3JkIiBmb3JtQ29udHJvbE5hbWU9InBhc3N3b3JkIj4KICA8L2Rpdj4KICA8YnV0dG9uPkxvZ2luPC9idXR0b24+CjwvZm9ybT4K” copy_button=”on” copy_button_tooltip=”\u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434” _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous video we’ve discussed template driven forms in Angular. In this tutorial we will discuss reactive forms.Reactive forms are more convenient for handling large forms and the relationships between form fields. For example, address fields can be part of a larger registration form. With reactive forms, you can react to changes in form […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[256,219],"tags":[],"class_list":["post-36536","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"\n