feat(front): util functions for determining form state

apps/frontend/src/app/pages/maps/submission-form/map-submission-form.component.html

@@ -24,19 +24,19 @@ <h4>Welcome to the Momentum Mod map submission page!</h4>
           <m-icon
             class="scale-0 text-3xl text-green-500 transition-transform"
             [icon]="'check-outline'"
-            [ngClass]="{ 'scale-100': isGroupValid(files) }"
+            [ngClass]="{ 'scale-100': FormUtils.groupIsComplete(files) }"
             mTooltip="Section is complete!"
           />
           <m-icon
             class="scale-0 text-3xl text-red-500 transition-transform"
             [icon]="'alert-outline'"
-            [ngClass]="{ 'scale-100': isGroupInvalid(files) }"
+            [ngClass]="{ 'scale-100': FormUtils.groupIsActuallyInvalid(files) }"
             mTooltip="Section contains invalid items!"
           />
           <m-icon
             class="scale-0 text-3xl text-blue-400 transition-transform"
             [icon]="'pencil-outline'"
-            [ngClass]="{ 'scale-100': isGroupAwaitingEditing(files) }"
+            [ngClass]="{ 'scale-100': FormUtils.groupIsIncomplete(files) }"
             mTooltip="Section is incomplete!"
           />
         </div>
@@ -132,19 +132,19 @@ <h5 class="mt-1 text-center text-xl font-medium">
           <m-icon
             class="scale-0 text-3xl text-green-500 transition-transform"
             [icon]="'check-outline'"
-            [ngClass]="{ 'scale-100': isGroupValid(info) }"
+            [ngClass]="{ 'scale-100': FormUtils.groupIsComplete(details) }"
             mTooltip="Section is complete!"
           />
           <m-icon
             class="scale-0 text-3xl text-red-500 transition-transform"
             [icon]="'alert-outline'"
-            [ngClass]="{ 'scale-100': isGroupInvalid(info) }"
+            [ngClass]="{ 'scale-100': FormUtils.groupIsActuallyInvalid(details) }"
             mTooltip="Section contains invalid items!"
           />
           <m-icon
             class="scale-0 text-3xl text-blue-400 transition-transform"
             [icon]="'pencil-outline'"
-            [ngClass]="{ 'scale-100': isGroupAwaitingEditing(info) }"
+            [ngClass]="{ 'scale-100': FormUtils.groupIsIncomplete(details) }"
             mTooltip="Section is incomplete!"
           />
         </div>

apps/frontend/src/app/util/form-utils.util.ts

@@ -0,0 +1,36 @@
+import { FormGroup } from '@angular/forms';
+
+/**
+ * Returns true if a group is valid and dirty.
+ */
+export function groupIsComplete(group: FormGroup): boolean {
+  return group.dirty && group.valid;
+}
+
+/**
+ * Returns true if group contains a dirty invalid control.
+ *
+ * A formgroup can be dirty by virtue of one control being dirty, and invalid by
+ * virtue of a pristine control being invalid. But it's usually too early to
+ * show an error message at this point, because they simply haven't finished
+ * filling in the form.
+ *
+ * Use this check to determine if there's a control that's genuinely dirty and
+ * invalid, in which case you probably *do* want to yell at the user.
+ */
+export function groupIsActuallyInvalid(group: FormGroup): boolean {
+  return Object.values(group.controls).some((c) => c.dirty && c.invalid);
+}
+
+/*
+ * Return true if group is invalid but doesn't have any dirty invalid
+ * controls.
+ *
+ * This is true for a pristine group, and only becomes false when (a) the form
+ * complete and valid, or (b) the form has a dirty, invalid control.
+ *
+ *
+ */
+export function groupIsIncomplete(group: FormGroup): boolean {
+  return !groupIsActuallyInvalid(group) && !group.valid;
+}

apps/frontend/src/app/util/index.ts

@@ -1,3 +1,4 @@
 export * from './unsub.class';
 export * from './grouped-map-leaderboards.util';
 export * from './grouped-map-credits.class';
+export * as FormUtils from './form-utils.util';