{"id":484,"date":"2019-04-16T01:18:13","date_gmt":"2019-04-15T19:48:13","guid":{"rendered":"http:\/\/uitutorials.in\/wp\/?p=484"},"modified":"2019-09-30T08:03:10","modified_gmt":"2019-09-30T02:33:10","slug":"loop-through-all-form-controls-in-formgroup-in-reactive-form","status":"publish","type":"post","link":"https:\/\/uitutorials.in\/wp\/loop-through-all-form-controls-in-formgroup-in-reactive-form\/","title":{"rendered":"Loop through all form controls in formGroup in reactive form"},"content":{"rendered":"<p><strong>How to loop through all form controls in a formgroup including nested form groups in a reactive form.<\/strong><\/p>\n<p>It can help us perform the following on all the form controls in a reactive form <\/p>\n<ul>\n<li>Reset form controls<\/li>\n<li>Enable or disable all form controls or just the nested formgroup controls<\/li>\n<li>Set validators and clear validators<\/li>\n<li>Mark form controls as dirty, touched, untouched, pristine etc.<\/li>\n<li>Move validation messages and the logic to show and hide them into the component class from the view template.<\/li>\n<\/ul>\n<p>We want every form control key and value to be logged to the console.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">logKeyValuePairs(group: FormGroup): void {\r\n    console.log(Object.keys(group.controls));\r\n  }\r\n\r\n  onLoadDataClick(): void {\r\n    this.logKeyValuePairs(this.employeeForm);\r\n  }\r\n<\/code><\/pre>\n<p>It will print all form control key and value <\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">logKeyValuePairs(group: FormGroup): void {\r\n    \/\/ loop through each key in the FormGroup\r\n    Object.keys(group.controls).forEach((key: string) => {\r\n      \/\/ Get a reference to the control using the FormGroup.get() method\r\n      const abstractControl = group.get(key);\r\n      \/\/ If the control is an instance of FormGroup i.e a nested FormGroup\r\n      \/\/ then recursively call this same method (logKeyValuePairs) passing it\r\n      \/\/ the FormGroup so we can get to the form controls in it\r\n      if (abstractControl instanceof FormGroup) {\r\n        this.logKeyValuePairs(abstractControl);\r\n        \/\/ If the control is not a FormGroup then we know it's a FormControl\r\n      } else {\r\n        \/\/ abstractControl.disable();\r\n        \/\/ abstractControl.markAsDirty();\r\n        console.log('Key = ' + key + ' && Value = ' + abstractControl.value);\r\n      }\r\n    });\r\n  }<\/code><\/pre>\n<h2>Source Download<\/h3>\n<p> &#8211; <a href=\"https:\/\/github.com\/kprabhanew\/Angular6\/tree\/loopControlsRF-11\" rel=\"noopener\" target=\"_blank\">github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to loop through all form controls in a formgroup including nested form groups in a reactive form. It can help us perform the following on all the form controls in a reactive form Reset form controls Enable or disable all form controls or just the nested formgroup controls Set<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[87],"class_list":["post-484","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":5,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/484\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}