feat: add support for static error-state in FormGroup

This is helpful if the FormGroup is used as a container for other fields
which may have errors but the root FormGroup is used for propagating a
save state.

src/components/generic/FormGroup.vue

@@ -38,12 +38,7 @@
         <slot name="iconLeft" :class="[iconClasses, 'tw-ml-2']" role="presentation" />
         <slot name="iconRight" :class="[iconClasses, 'tw-mr-2']" role="presentation" />
       </div>
-      <div
-        v-if="hasErrors"
-        :id="errorsId"
-        class="invalid-feedback"
-        :class="{ 'tw-block': hasErrors }"
-      >
+      <div v-if="errors !== undefined" :id="errorsId" class="invalid-feedback tw-block">
         <template v-for="(error, index) in errorList" :key="index">
           <p class="last:tw-mb-0">
             {{
@@ -78,6 +73,7 @@ const props = withDefaults(
     label?: string
     customControl?: boolean
     errors?: undefined | (Error | undefined | null)[]
+    hasError?: boolean
     withEditButton?: boolean
     isSaving?: boolean | undefined
     center?: boolean
@@ -88,6 +84,7 @@ const props = withDefaults(
     label: '',
     errors: undefined,
     center: false,
+    hasError: false,
   },
 )
 const emit = defineEmits<{
@@ -100,7 +97,7 @@ const formGroupClass = inject('formGroupClass', undefined)
 const id = useId('form-group-control')
 const errorsId = useId('form-group-errors')
 const errorList = computed<Error[]>(() => (props.errors ?? []).filter((e): e is Error => !!e))
-const hasErrors = computed(() => errorList.value.length > 0)
+const hasErrors = computed(() => props.hasError || errorList.value.length > 0)
 const iconClasses = 'tw-pointer-events-none tw-grid-area-cover tw-self-center'
 const controlAttributes = computed(() => ({
   class: [