如何重置 Clarity 表单的错误状态？

Question

如何重置新 Clarity 0.13 表单的错误状态？我正在使用反应式表单，我想完全重置表单。虽然我可以轻松重置

FormGroup

，但我不知道如何摆脱例如当失去所需的空输入的焦点时触发的错误状态。我正在寻找 Clarity 代码中未记录的功能，但我找不到任何有帮助的东西。

这里是一个 stackblitz，您可以在其中重现问题：https://stackblitz.com/edit/clarity-light-theme-v013-6s2qtq

1. 点击输入
2. 在输入框外点击
3. 单击“重置表单”按钮
4. 输入仍被标记为无效。嗯，事实上确实如此。但我需要原始状态才能重用表单。

Answer 1

不幸的是，我们在 Clarity 中尚不支持这一点。现在处理这个问题的方法虽然不优雅，但在表单上放置一个

ngIf

并基本上同时重置表单和 DOM。这是有效的，因为它完全破坏了 DOM 和表单状态，让您从头开始。

这是一个解决方法，如果您想关注它，我们提出了一个问题来跟踪此功能。 https://github.com/vmware/clarity/issues/2678

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

Answer 2

在我看来，更优雅的解决方案应该是破坏表单并重新创建它。这就像重置。

这是一个示例：https://stackblitz.com/edit/stackblitz-starters-xwb3va?file=src%2Fmain.ts