{"id":7658,"date":"2020-12-13T05:23:00","date_gmt":"2020-12-13T11:23:00","guid":{"rendered":"https:\/\/upmostly.com\/?p=7658"},"modified":"2022-11-01T09:38:02","modified_gmt":"2022-11-01T14:38:02","slug":"reset-validation-on-an-angular-form","status":"publish","type":"post","link":"http:\/\/upmostly.com\/angular\/reset-validation-on-an-angular-form","title":{"rendered":"Reset Validation On An Angular Form"},"content":{"rendered":"\n<p>Some forms require the ability to \u201cclear\u201d all input and \u201creset\u201d the form. I struggled through a few different ways of clearing a form before I found a foolproof way that seemed to work in all scenarios I tested.<\/p>\n\n\n\n<p>First, what didn\u2019t work. NGForm does have two reset methods :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">this.myForm.reset();<\/code><\/pre>\n\n\n\n<p>And<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">this.myForm.resetForm();<\/code><\/pre>\n\n\n\n<p>Both of these \u201cappeared\u201d to work, but I found it completely broke data binding at times where values got reset to null and lost their data binding. I personally use Template Driven Forms rather than Reactive Forms, so it may work in different scenarios, but for me, this really broke data binding.<\/p>\n\n\n\n<p>If you use Template Driven Forms like me, then the best way I found to actually wipe values in the form was to first reset the underlying two way data binding object. E.g. If I\u2019m binding to a \u201cPerson\u201d object then I first do new Person() etc.<\/p>\n\n\n\n<p>Then I can run the following code which only seems to reset the validity of controls rather than fiddling with the underlying data:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">Object.keys(this.myForm.controls).forEach((key) =&gt; {\n    const control = this.myForm.controls[key];\n    control.markAsPristine();\n    control.markAsUntouched();\n});<\/code><\/pre>\n\n\n\n<p>This runs through every control and resets the validity without affecting binding. This seemed to work the best for me. An alternative I found would be to change the call to setErrors()<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">Object.keys(this.myForm.controls).forEach((key) =&gt; {\n    const control = this.myForm.controls[key];\n    control.setErrors(null);\n});<\/code><\/pre>\n\n\n\n<p>Again, the first iteration worked for me, but try both if it doesn\u2019t for you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding An NGForm Extension Method<\/h3>\n\n\n\n<p>Now rather than copy and pasting this everywhere, instead I created an extension. I created a file called ng-form.extensions.ts with the following content :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { NgForm } from '@angular\/forms';\n\ndeclare module \"@angular\/forms\/\" {\n    interface NgForm {\n      resetValidation(this:Form) : void;\n    }\n}\n\nNgForm.prototype.resetValidation = function(this:NgForm) {\n    Object.keys(this.controls).forEach((key) =&gt; {\n        const control = this.controls[key];\n        control.markAsPristine();\n        control.markAsUntouched();\n    });\n}<\/code><\/pre>\n\n\n\n<p>Then in my component, I have to import this extension file like so :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import 'src\/app\/_core\/extensions\/ng-form.extensions'<\/code><\/pre>\n\n\n\n<p>And I then simply reset the form like so :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">this.myForm.resetValidation();<\/code><\/pre>\n\n\n\n<p>Much cleaner!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some forms require the ability to \u201cclear\u201d all input and \u201creset\u201d the form. I struggled through a few different ways of clearing a form before I found a foolproof way that seemed to work in all scenarios I tested. First, what didn\u2019t work. NGForm does have two reset methods : And Both of these \u201cappeared\u201d [&hellip;]<\/p>\n","protected":false},"author":131,"featured_media":7748,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-7658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/131"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=7658"}],"version-history":[{"count":3,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7658\/revisions"}],"predecessor-version":[{"id":13326,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7658\/revisions\/13326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/7748"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=7658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=7658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=7658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}