fix(public forms): show info to user submitting invalid form

instead of throwing error in background fixes #2445
Aam-Digital · Jul 2, 2024 · 7bc360f · 7bc360f
1 parent 3b64625
commit 7bc360f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/src/app/features/public-form/public-form.component.spec.ts b/src/app/features/public-form/public-form.component.spec.ts
@@ -17,6 +17,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
 import { EntityFormService } from "../../core/common-components/entity-form/entity-form.service";
 import { ConfigService } from "../../core/config/config.service";
 import { EntityMapperService } from "../../core/entity/entity-mapper/entity-mapper.service";
+import { InvalidFormFieldError } from "../../core/common-components/entity-form/invalid-form-field.error";
 
 describe("PublicFormComponent", () => {
   let component: PublicFormComponent<Child>;
@@ -97,6 +98,24 @@ describe("PublicFormComponent", () => {
     expect(component.form.get("name")).toHaveValue(null);
   }));
 
+  it("should show a snackbar error and not reset when trying to submit invalid form", fakeAsync(() => {
+    initComponent();
+    tick();
+    const openSnackbarSpy = spyOn(TestBed.inject(MatSnackBar), "open");
+    const saveSpy = spyOn(TestBed.inject(EntityFormService), "saveChanges");
+    saveSpy.and.throwError(new InvalidFormFieldError());
+    component.form.get("name").setValue("some name");
+
+    component.submit();
+
+    expect(saveSpy).toHaveBeenCalledWith(component.form, component.entity);
+    tick();
+    expect(openSnackbarSpy).toHaveBeenCalledWith(
+      jasmine.stringContaining("invalid"),
+    );
+    expect(component.form.get("name")).toHaveValue("some name");
+  }));
+
   it("should reset the form when clicking reset", fakeAsync(() => {
     initComponent();
     tick();

diff --git a/src/app/features/public-form/public-form.component.ts b/src/app/features/public-form/public-form.component.ts
@@ -17,6 +17,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
 import { MatCardModule } from "@angular/material/card";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { FieldGroup } from "../../core/entity-details/form/field-group";
+import { InvalidFormFieldError } from "../../core/common-components/entity-form/invalid-form-field.error";
 
 @UntilDestroy()
 @Component({
@@ -55,11 +56,21 @@ export class PublicFormComponent<E extends Entity> implements OnInit {
       .subscribe(() => this.loadFormConfig());
   }
 
-  submit() {
-    this.entityFormService
-      .saveChanges(this.form, this.entity)
-      .then(() => this.snackbar.open($localize`Successfully submitted form`))
-      .then(() => this.initForm());
+  async submit() {
+    try {
+      await this.entityFormService.saveChanges(this.form, this.entity);
+      this.snackbar.open($localize`Successfully submitted form`);
+    } catch (e) {
+      if (e instanceof InvalidFormFieldError) {
+        this.snackbar.open(
+          $localize`Some fields are invalid, please check the form and submit again.`,
+        );
+        return;
+      }
+      throw e;
+    }
+
+    this.initForm();
   }
 
   reset() {