Search code examples
angularvmware-clarityclarity

How to reset error state of Clarity forms?

How can I reset the error state of the new Clarity 0.13 forms? I'm using reactive forms and I want to fully reset the form. While I can easily reset the FormGroup I don't know how I can get rid of e.g. the error state that is triggered when losing focus of a required empty input. I was looking for an undocumented feature in the Clarity code but I couldn't find anything that helps here.

Here is a stackblitz where you can reproduce the problem: https://stackblitz.com/edit/clarity-light-theme-v013-6s2qtq

  1. Click in the input
  2. Click outside the input
  3. Click the "Reset Form" button
  4. The input is still marked as invalid. Well, actually it is. But I need the original state to reuse the form.
Solution

  • Unfortunately, we don't have support for this yet in Clarity. The way you can deal with this for now, while not elegant, is to put an ngIf on the form and basically reset the form and DOM at the same time. This works because it destroys the DOM and form states fully, letting you start from scratch.

    This is a workaround and we opened an issue to track this feature if you want to follow it. https://github.com/vmware/clarity/issues/2678

    Demo: https://stackblitz.com/edit/clarity-light-theme-v013-form-reset-workaround?file=src/app/app.component.ts