0
GregB created
- ABP Framework version: v4.3.3
- UI type: Angular
- DB provider: EF Core
- Tiered (MVC) or Identity Server Separated (Angular): no
- Exception message and stack trace: N/A
- Steps to reproduce the issue:"
How can I force all validation errors to show in an Angular form?
I've got a simple form with a required field
this.form = this.fb.group({
name: [name ?? null, [Validators.required]]
});
But when I click submit, no errors are shown.
submitForm()
{
if(!this.form.valid)
{
// How do I show the errors?
return;
}
// ...
}
If I type something into the field, then delete it, the required validation message shows.
I want to show all validation errors when the user tries to submit an invalid form.
1 Answer(s)
-
1
Hello @GregB
There are two ways to achieve this:
- You should mark form controls as dirty as shown below:
if(!this.form.valid) { Object.values(this.form.controls).forEach((control) => { control.markAsDirty(); control.updateValueAndValidity(); }); return; }- You can use the
ngx-validate'svaliteOnSubmitdirective. See the working example: https://stackblitz.com/edit/ngx-validate?file=src/app/components/app.component.html
