How to show all control errors upon form submit?

Question

How can I show all control errors at once upon form submission?

I've tried to use the clrForm with clr-control-error, but the errors are only showing when inputs are in touched state.

<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>

Here's the Stackblitz url: https://stackblitz.com/edit/clarity-light-theme-v1-0-rdq5tq

In the stackblitz, there are two forms: one is clarity form and the other is just native angular form. The expected outcome is when you click on the submit button, it should display all error messages. It works on the native angular form because I can control when to display the errors but not on clarity form. Clarity form only displays errors on blur or when the form control's state is touched. Is there a way to force display the error helper message?

Answer 1

Clarity documentation for v1 shows how to do this under the Reset and force validation section https://v1.clarity.design/forms. In v1 it uses markAsDirty() but in v2 it will be markAsTouched().

Essentially you get a reference to the ClrForm and call the method (in v2 it will be this.form.markAsTouched().

@ViewChild(ClrForm) form: ClrForm;

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