@energycap/components 0.39.21-ECAP-25650-file-upload-validation-support.20240805-1706 → 0.39.21-ECAP-25650-file-upload-validation-support.20240806-1029

package/fesm2020/energycap-components.mjs

@@ -4108,8 +4108,8 @@ class FileUploadComponent extends FormControlBase {
     // static class to create the form group from a parent component
     static getFormModel(validators, disabled = false, fileValidators) {
         let formGroup = new FormGroup({
-            file: new FormControl({ value: null, disabled: disabled }, validators),
-            name: new FormControl({ value: null, disabled: disabled }, { validators: validators, asyncValidators: fileValidators }),
+            file: new FormControl({ value: null, disabled: disabled }, { validators: validators, asyncValidators: fileValidators }),
+            name: new FormControl({ value: null, disabled: disabled }, validators),
             base64FileString: new FormControl(null),
             uploadResult: new FormControl(null),
         });
@@ -4119,10 +4119,10 @@ class FileUploadComponent extends FormControlBase {
         return formGroup;
     }
     static getFileValidator(callback) {
-        return async (nameControl) => {
-            if (nameControl.value && nameControl.parent && nameControl.parent.get('file')?.value) {
-                let file = nameControl.parent.get('file')?.value;
-                let base64 = nameControl.parent.get('base64FileString')?.value;
+        return async (control) => {
+            if (control.value && control.parent) {
+                let file = control.value;
+                let base64 = control.parent.get('base64FileString')?.value;
                 return await callback(file, base64);
             }
             return null;
@@ -4173,6 +4173,11 @@ class FileUploadComponent extends FormControlBase {
                 });
             }
         });
+        // Sync errors from the file control to the name control whenever the file control status changes
+        this.formModel.get('file')?.statusChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(() => {
+            const errors = this.formModel.get('file')?.errors ?? null;
+            this.formModel.get('name')?.setErrors(errors);
+        });
     }
     async fileChange(files) {
         if (this.multiSelect) {
@@ -10593,6 +10598,8 @@ class PageBaseComponent {
      * @param event
      */
     async onSave(event) {
+        // Show the saving overlay in case we have async validators in play
+        this.showStatus(PageStatus.Saving);
         this.formGroup.markAllAsTouched();
         // If the form has pending async validators, wait for it them to complete before proceeding
         if (this.formGroup.pending) {
@@ -10602,6 +10609,8 @@ class PageBaseComponent {
             await this.save();
         }
         else {
+            // Remove the saving overlay to display any errors
+            this.showStatus(PageStatus.Loaded);
             // Only show the banner with the generic message if the parent component hasn't already set one
             // by implementing onSave for additional validation
             if (this.errors === '') {