如何在表单提交时显示所有控件错误？

Question

如何在提交表单时一次显示所有控件错误？

我尝试将 clrForm 与 clr-control-error 结合使用，但错误仅在输入处于触摸状态时显示。

<clr-control-error *clrIfError="'required'">An email address must be provided.</clr-control-error>
<clr-control-error *clrIfError="'invalidEmailAddress'">The email address is invalid.</clr-control-error>

这里是 Stackblitz url：https://stackblitz.com/edit/clarity-light-theme-v1-0-rdq5tq

在 stackblitz 中，有两种形式：一种是清晰形式，另一种只是原生 angular 形式。预期的结果是当您单击提交按钮时，它应该显示所有错误消息。它适用于本机 angular 表单，因为我可以控制何时显示错误，但不能控制清晰度表单。清晰表单仅在模糊或触摸表单控件状态时显示错误。有没有办法强制显示错误帮助消息？

Answer 1

v1 的 Clarity 文档显示了如何在重置和强制验证部分执行此操作 https://v1.clarity.design/forms。在 v1 中它使用 markAsDirty() 但在 v2 中它将是 markAsTouched().

本质上，您获得了对 ClrForm 的引用并调用了该方法（在 v2 中它将是 this.form.markAsTouched()。

@ViewChild(ClrForm) form: ClrForm;

validate() {
  this.form.markAsDirty();
}

如何在表单提交时显示所有控件错误？

How to show all control errors upon form submit?

angular

vmware-clarity