Sometimes in the development process, we may want to get the list of form controls that have validation errors in Angular Reactive Forms. To solve this problem we can use the Error property of AbstractControl class.<\/p>\n\n\n\n
Here’s an example of how to achieve this:<\/p>\n\n\n\n
Let\u00b4s say, we have the following template : (app-component.html<\/em><\/strong>)<\/p>\n\n\n\n To retrieve the list of form controls that have validation errors, let us create this function in the component ((app-component.ts<\/em><\/strong>)<\/p>\n\n\n\n In the above example, we iterate through each control in the formGroup using Object.keys(this.myFormGroup.controls)<\/strong><\/em>, and then for each control, we check if it has any errors using control.errors<\/strong><\/em>. If errors exist, we can log the control name and the error details.<\/p>\n\n\n\n We can use this approach to retrieve the names of form controls that have validation errors and perform any necessary actions based on the error information.<\/p>\n","protected":false},"excerpt":{"rendered":" Sometimes in the development process, we may want to get the list of form controls that have validation errors in Angular Reactive Forms. To solve this problem we can use the Error property of AbstractControl class. Here’s an example of how to achieve this: Let\u00b4s say, we have the following template : (app-component.html) To retrieve […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,5,83],"tags":[820,815,817,819,816,818,814],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3174"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3174"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3174\/revisions"}],"predecessor-version":[{"id":3175,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3174\/revisions\/3175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<form [formGroup]=\"myFormGroup\" (ngSubmit)=\"onSubmit()\">\n <!-- Here we have a list of controls with formControlName -->\n ... \n <form-field>\r\n <label>ProjektType<\/sbb-label>\r\n <input formControlName=\"type\"\/>\r\n <\/form-field>\n <form-field>\r\n <label>Manager<\/sbb-label>\r\n <input formControlName=\"manager\"\/>\r\n <\/form-field>\n ...\n<\/form><\/code><\/pre>\n\n\n\n\/\/ Assuming myFormGroup is our FormGroup instance\r\nObject.keys(this.myFormGroup.controls).forEach(controlName => {\r\n const control = this.myFormGroup.get(controlName);\r\n if (control?.errors) {\r\n console.log('Control name with error: ', controlName);\r\n console.log('Error details: ', control.errors);\r\n }\r\n});\r\n<\/code><\/pre>\n\n\n\n