Enhance plugin video fields

Add video form tab selection
Add ability to display an error

2 files changed, 18 insertions, 11 deletions

diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index f2ce82360..30b59c141 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -56,13 +56,18 @@ export abstract class FormReactive {
 
       if (control.dirty) this.formChanged = true
 
-      // Don't care if dirty on force check
-      const isDirty = control.dirty || forceCheck === true
-      if (control && isDirty && control.enabled && !control.valid) {
-        const messages = validationMessages[field]
-        for (const key of Object.keys(control.errors)) {
-          formErrors[field] += messages[key] + ' '
-        }
+      if (forceCheck) control.updateValueAndValidity({ emitEvent: false })
+      if (!control || !control.dirty || !control.enabled || control.valid) continue
+
+      const staticMessages = validationMessages[field]
+      for (const key of Object.keys(control.errors)) {
+        const formErrorValue = control.errors[key]
+
+        // Try to find error message in static validation messages first
+        // Then check if the validator returns a string that is the error
+        if (typeof formErrorValue === 'boolean') formErrors[field] += staticMessages[key] + ' '
+        else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
+        else throw new Error('Form error value of ' + field + ' is invalid')
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index c0664de5f..055fbb2d9 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -40,7 +40,7 @@ export class FormValidatorService {
     return { form, formErrors, validationMessages }
   }
 
-  updateForm (
+  updateFormGroup (
     form: FormGroup,
     formErrors: FormReactiveErrors,
     validationMessages: FormReactiveValidationMessages,
@@ -52,7 +52,7 @@ export class FormValidatorService {
 
       const field = obj[name]
       if (this.isRecursiveField(field)) {
-        this.updateForm(
+        this.updateFormGroup(
           form[name],
           formErrors[name] as FormReactiveErrors,
           validationMessages[name] as FormReactiveValidationMessages,
@@ -66,8 +66,10 @@ export class FormValidatorService {
 
       const defaultValue = defaultValues[name] || ''
 
-      if (field?.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[]))
-      else form.addControl(name, new FormControl(defaultValue))
+      form.addControl(
+        name,
+        new FormControl(defaultValue, field?.VALIDATORS as ValidatorFn[])
+      )
     }
   }