Improve edit config submit error

3 files changed, 34 insertions, 4 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 4596a130e..b6365614d 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -54,11 +54,16 @@
   <div class="form-row mt-4"> <!-- submit placement block -->
     <div class="col-md-7 col-xl-5"></div>
     <div class="col-md-5 col-xl-5">
-      <span class="form-error submit-error" i18n *ngIf="!form.valid">
-        It seems like the configuration is invalid. Please search for potential errors in the different tabs.
 
-        {{ formErrors }}
-      </span>
+      <div class="form-error submit-error" i18n *ngIf="!form.valid">
+        There are errors in the form:
+
+        <ul>
+          <li *ngFor="let error of grabAllErrors()">
+            {{ error }}
+          </li>
+        </ul>
+      </div>
 
       <span class="form-error submit-error" i18n *ngIf="!hasLiveAllowReplayConsistentOptions()">
         You cannot allow live replay if you don't enable transcoding.
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index bbdf1bfbe..2c7a10937 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -290,6 +290,25 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     this.router.navigate([], { fragment: this.activeNav })
   }
 
+  grabAllErrors (errorObjectArg?: any) {
+    const errorObject = errorObjectArg || this.formErrors
+
+    let acc: string[] = []
+
+    for (const key of Object.keys(errorObject)) {
+      const value = errorObject[key]
+      if (!value) continue
+
+      if (typeof value === 'string') {
+        acc.push(value)
+      } else {
+        acc = acc.concat(this.grabAllErrors(value))
+      }
+    }
+
+    return acc
+  }
+
   private updateForm () {
     this.form.patchValue(this.customConfig)
   }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 65fc31412..5d826fbe9 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -45,6 +45,8 @@
                   <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
                   <span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
                 </div>
+
+                <div *ngIf="formErrors.live.maxInstanceLives" class="form-error">{{ formErrors.live.maxInstanceLives }}</div>
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
@@ -56,6 +58,8 @@
                   <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
                   <span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
                 </div>
+
+                <div *ngIf="formErrors.live.maxUserLives" class="form-error">{{ formErrors.live.maxUserLives }}</div>
               </div>
 
               <div class="form-group" [ngClass]="getDisabledLiveClass()">
@@ -65,6 +69,8 @@
                   labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
                   bindLabel="label" bindValue="value" [clearable]="false" [searchable]="true"
                 ></my-select-options>
+
+                <div *ngIf="formErrors.live.maxDuration" class="form-error">{{ formErrors.live.maxDuration }}</div>
               </div>
 
             </ng-container>