{"id":2126,"date":"2024-07-31T17:40:38","date_gmt":"2024-08-01T00:40:38","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2126"},"modified":"2024-07-31T17:40:39","modified_gmt":"2024-08-01T00:40:39","slug":"formgroup-all-you-need-to-know","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/formgroup-all-you-need-to-know\/","title":{"rendered":"FormGroup: All you need to know"},"content":{"rendered":"\n

Recently, during an Angular Accelerator coaching call<\/a>, my client asked what is the point of using FormGroup<\/a><\/code>. I then realized I had never written about FormGroup<\/code>, so here is a post to fix that.<\/p>\n\n\n\n

When using reactive forms<\/a>, we always have at least one FormGroup<\/code>, which happens to be the entire form. This doesn’t mean that Form Groups are only designed for that purpose: A complex form can be divided into multiple groups. For instance, if we have a form where a user is supposed to enter their name, address, birth date, etc., we could group some of these controls into FormGroups<\/code>.<\/p>\n\n\n\n

What do we get out of that? A few different things:<\/p>\n\n\n\n

    \n
  1. Form groups aggregate the validation state of all individual controls into a group state<\/strong>. If an address is made of 4 controls (street, city, zip code, country), then the form group for these 4 controls will be invalid<\/a> when any controls are invalid, touched when any control is touched<\/a>, etc.<\/li>\n\n\n\n
  2. Form groups aggregate actions on all individual controls within the group<\/strong>. Want to disable address entry? Instead of disabling all 4 controls one by one, you can do addressGroup.disable()<\/code> , which is a lot less error-prone (you can’t forget one of these controls)<\/li>\n\n\n\n
  3. Form groups store the value of all controls as a single object. In my example with 4 controls for an address, accessing addressGroup.getValue()<\/code> would return:<\/li>\n<\/ol>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n\n

    So, the main benefit is to have grouped actions and status updates for a bunch of form controls. Let’s take another example with actual code (you can find the full code base on Stackblitz here<\/a>):<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n\n

    If I use the following expression in my template to see the value of my userInfo<\/code>, here’s what I get:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n\n

    As you can see, my form group creates an object that updates when individual control values change. Perfect! Now, let’s click a button that sets the form group value to an object:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n\n

    Now, I can use multiple values with one line of code. There is no need to call setValue()<\/code> on all controls one by one. That’s cool. What if I want to apply a “diff” to my group and not set the entire thing? Say I wanted to be younger but not change my name or anything else:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n\n

    Now, I can “patch” my form group with some localized changes, and I don’t need to worry about the other values of the controls of that group. That’s the magic of formGroup.patchValue()<\/code>.<\/p>\n\n\n\n

    You can also reset the entire group with formGroup.reset()<\/code>, add or remove controls and validators, and more. The full API is here<\/a>. That’s the power of FormGroups<\/code> in action!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Recently, during an Angular Accelerator coaching call, my client asked what is the point of using FormGroup. I then realized I had never written about FormGroup, so here is a post to fix that. When using reactive forms, we always have at least one FormGroup, which happens to be the entire form. This doesn’t mean […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,22],"tags":[],"class_list":["post-2126","post","type-post","status-publish","format-standard","hentry","category-angular","category-forms"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2126"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2126\/revisions"}],"predecessor-version":[{"id":2138,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2126\/revisions\/2138"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}