LIBDRUM-909. Force re-display of validation errors on page refresh

These changes are an attempt to fix an apparent race condition between
the Angular field validation and the DSpace refresh of the page on
attempted submission.

The issue being fixed is that the GUI validation error warnings
momentarily "flash" and then disappear when submitting the form using
the "Deposit" button.

The workflow appears to be:

* The user does not focus on or enter anything in a required field, and
  then attempts to submit the form.
* The request to the DSpace backend does not include any JSON related to
  the required field
* A 200 response is returned from the DSpace backend, with an "errors"
  array in the JSON, indicating the validation error
* The 200 response triggers a page refresh, which wipes out any existing
  validation error display on the page.

This change forces all the validation errors to be re-displayed by
touching the relevant fields and triggering a validity check after the
page is refreshed.

It is unclear whether this is the optimal fix, so it has not been
submitted upstream to DSpace. Also, DSpace has been working on various
fixes, so the changes in this class should be re-evaluated on upgrades,
and removed if possible.

https://umd-dit.atlassian.net/browse/LIBDRUM-909

Author: dsteelma-umd

docs/DrumAngularCustomizations.md

@@ -80,3 +80,21 @@ would successfully complete:
 
 * Commented out the "codecov" job, because UMD does not have an appropriate key
   for uploading the results to codecov.io.
+
+## Change to Submission Form Validation Handling
+
+The "SubmissionSectionFormComponent" class
+(src/app/submission/sections/form/section-form.component.ts) has been
+modified with a "ngAfterViewChecked" method to ensure that form validation
+errors are displayed, even after a page refresh.
+
+This change is intended to fix an issue (see LIBDRUM-909) in which submitting
+a form without all the required fields populated would not show GUI validation
+warnings on all affected fields. This is apparently caused by a race condition
+between the Angular validation handling, and a page refresh triggered by the
+DSpace backend response.
+
+It is unclear whether this is the optimal fix, so it has not been submitted
+upstream to DSpace. Also, DSpace has been working on various similar fixes, so
+the changes in this class should be re-evaluated on upgrades, and
+removed if possible.

src/app/submission/sections/form/section-form.component.ts

@@ -1,5 +1,6 @@
 import { NgIf } from '@angular/common';
 import {
+  AfterViewChecked,
   ChangeDetectorRef,
   Component,
   Inject,
@@ -24,6 +25,7 @@ import {
   map,
   mergeMap,
   take,
+  takeUntil,
   tap,
 } from 'rxjs/operators';
 
@@ -82,7 +84,16 @@ import { SectionFormOperationsService } from './section-form-operations.service'
   ],
   standalone: true,
 })
-export class SubmissionSectionFormComponent extends SectionModelComponent {
+// UMD Customization
+// This class is customized to correct an issue seem with the display of
+// validation errors (see LIBDRUM-909).
+//
+// It is unclear whether this is the optimal fix, so it has not been submitted
+// upstream to DSpace. Also, DSpace has been working on various fixes, so
+// the changes in this class should be re-evaluated on upgrades, and
+// removed if possible.
+export class SubmissionSectionFormComponent extends SectionModelComponent implements AfterViewChecked {
+  // End UMD Customization
 
   /**
    * The form id
@@ -157,6 +168,11 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
    */
   protected isSectionReadonly = false;
 
+  // UMD Customization
+  private triggerValidationErrorDisplay = false;
+  private pendingErrors: SubmissionSectionError[] = [];
+  // End UMD Customization
+
   /**
    * The FormComponent reference
    */
@@ -231,7 +247,58 @@ export class SubmissionSectionFormComponent extends SectionModelComponent {
           this.cdr.detectChanges();
         }
       });
+
+
+    // UMD Customization
+    // Logic to maintain red borders after an attempted deposit
+    const sectionErrors = this.sectionService.getSectionErrors(this.submissionId, this.sectionData.id);
+    if (sectionErrors) {
+      sectionErrors.pipe(
+        filter((errors: SubmissionSectionError[]) => errors && errors.length > 0),
+        takeUntil(this.subs),
+      ).subscribe((errors: SubmissionSectionError[]) => {
+        // Store errors and raise flag indicating validation errors should be
+        // displayed.
+        this.pendingErrors = errors;
+        this.triggerValidationErrorDisplay = true;
+      });
+    }
+    // End UMD Customization
+  }
+
+  // UMD Customization
+  ngAfterViewChecked() {
+    if (this.triggerValidationErrorDisplay && this.formRef && this.formRef.formGroup) {
+      // Lower the flag immediately to prevent infinite loops
+      this.triggerValidationErrorDisplay = false;
+      let touchedAny = false;
+      this.pendingErrors.forEach((error: SubmissionSectionError) => {
+        // Paths have the form /sections/mhheaDescribe/dc.title
+        const pathParts = error.path.split('/');
+        const fieldId = pathParts[pathParts.length - 1];
+        const formGroup = this.formRef.formGroup;
+
+        if (formGroup) {
+          // Retrieve the specific control from the Reactive Form
+          const normalizedFieldId = fieldId.replace(/\./g, '_');
+          const control = this.formBuilderService.getFormControlById(normalizedFieldId, formGroup, this.formModel);
+
+          if (control) {
+            // markAsTouched() triggers the 'is-invalid' class/red border
+            control.markAsTouched();
+            // Optional: markAsDirty() ensures Angular treats the field as modified
+            control.markAsDirty();
+            control.updateValueAndValidity();
+            touchedAny = true;
+          }
+        }
+      });
+      if (touchedAny) {
+        this.cdr.detectChanges();
+      }
+    }
   }
+  // End UMD Customization
 
   /**
    * Unsubscribe from all subscriptions