[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=”Template-driven forms in Angular” content_max_width=”640px” _builder_version=”4.27.4″ 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%” hover_enabled=”0″ 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” sticky_enabled=”0″][\/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.4″ 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.4″ hover_enabled=”0″ 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=”{}” sticky_enabled=”0″]<\/p>\n
In this lesson, we’ll start by discussing forms. Angular provides two ways to work with forms \u2014 template-driven and reactive forms. Today, we’ll focus on the template-driven approach.<\/p>\n
[\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/cEqEldpSfvc” _builder_version=”4.27.4″ global_colors_info=”{}”][\/et_pb_video][et_pb_text _builder_version=”4.27.4″ hover_enabled=”0″ 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=”{}” sticky_enabled=”0″]<\/p>\n
Template-driven form connects a component class property with an input field using two-way data binding. Two-way binding is a mechanism that synchronizes data between the model (component class) and the view (component template).<\/p>\n
To bind data to an input field, you need to add the ngModel attribute to the input element (see code example below). Each field corresponds to a specific class property. To submit the form, add the (ngSubmit) event to the form element.<\/p>\n
In real projects, your forms can contain many fields. So when submitting a form, it\u2019s useful to use the ngForm directive, which is essentially a form instance containing all form values and other useful properties (for example, the form\u2019s validation state). You can read more about NgForm on the Angular website.<\/p>\n
In addition, many fields can depend on each other (for example, the zip code format may depend on the selected country). You need to manage these field dependencies, which can be cumbersome. For such complex forms, it\u2019s more convenient to use reactive forms, which we\u2019ll discuss in the next lesson.<\/p>\n
[\/et_pb_text][et_pb_dmb_code_snippet title=”app.ts” code=”aW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnOwppbXBvcnQge05nRm9ybX0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnOwoKQENvbXBvbmVudCh7CiAgc2VsZWN0b3I6ICdhcHAtcm9vdCcsCiAgaW1wb3J0czogWwoKICBdLAogIHRlbXBsYXRlVXJsOiAnLi9hcHAuaHRtbCcsCiAgc3R5bGVVcmw6ICcuL2FwcC5zY3NzJwp9KQpleHBvcnQgY2xhc3MgQXBwIHsKCiAgcHJvdGVjdGVkIGxvZ2luID0gJyc7CiAgcHJvdGVjdGVkIHBhc3N3b3JkID0gJyc7CiAgcHJvdGVjdGVkIHNlbGVjdGVkUm9sZSA9ICdndWVzdCc7CgogIHByb3RlY3RlZCByb2xlcyA9IFsnYWRtaW4nLCAnZ3Vlc3QnXTsKCiAgcHJvdGVjdGVkIHN1Ym1pdEZvcm0oZm9ybTogTmdGb3JtKSB7CiAgIGNvbnNvbGUubG9nKGZvcm0udmFsdWUpOwogICBjb25zb2xlLmxvZygnZm9ybSBpcyB2YWxpZDogJywgZm9ybS52YWxpZCk7CiAgfQoKfQ==” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”app.html” code=”PGZvcm0gKG5nU3VibWl0KT0ic3VibWl0Rm9ybShsb2dpbkZvcm0pIiAjbG9naW5Gb3JtPSJuZ0Zvcm0iPgogIDxkaXY+CiAgICA8bGFiZWwgZm9yPSJsb2dpbiI+TG9naW48L2xhYmVsPgogICAgPGlucHV0IHJlcXVpcmVkIHR5cGU9InRleHQiIGlkPSJsb2dpbiIgbmFtZT0ibG9naW4iIFsobmdNb2RlbCldPSJsb2dpbiI+CiAgPC9kaXY+CiAgPGRpdj4KICAgIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgICA8aW5wdXQgdHlwZT0icGFzc3dvcmQiIGlkPSJwYXNzd29yZCIgbmFtZT0icGFzc3dvcmQiIFsobmdNb2RlbCldPSJwYXNzd29yZCI+CiAgPC9kaXY+CiAgPGRpdj4KICAgIDxzZWxlY3QgbmFtZT0icm9sZSIgWyhuZ01vZGVsKV09InNlbGVjdGVkUm9sZSI+CiAgICAgIEBmb3IgKHJvbGUgb2Ygcm9sZXM7IHRyYWNrIHJvbGUpIHsKICAgICAgICA8b3B0aW9uPnt7cm9sZX19PC9vcHRpb24+CiAgICAgIH0KICAgIDwvc2VsZWN0PgogIDwvZGl2PgogIDxidXR0b24gW2Rpc2FibGVkXT0iIWxvZ2luRm9ybS52YWxpZCI+TG9naW48L2J1dHRvbj4KPC9mb3JtPgo=” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][\/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 this lesson, we’ll start by discussing forms. Angular provides two ways to work with forms \u2014 template-driven and reactive forms. Today, we’ll focus on the template-driven approach.Template-driven form connects a component class property with an input field using two-way data binding. Two-way binding is a mechanism that synchronizes data between the model (component class) […]<\/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-36523","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"\n