Show error on list input field (#196)

velis74 · Sep 12, 2023 · 6dd6008 · 6dd6008
1 parent b2922d3
commit 6dd6008
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/vue/dynamicforms/src/components/api_consumer/api-consumer.vue b/vue/dynamicforms/src/components/api_consumer/api-consumer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="flex: auto">
     <component :is="renderComponent" v-bind="renderComponentData"/>
   </div>
 </template>

diff --git a/vue/dynamicforms/src/components/form/inputs/list.vue b/vue/dynamicforms/src/components/form/inputs/list.vue
@@ -1,8 +1,11 @@
 <template>
-  <APIConsumerVue v-if="consumer" :consumer="consumer" :display-component="displayComponent"/>
+  <v-input v-bind="binds">
+    <APIConsumerVue v-if="consumer" :consumer="consumer" :display-component="displayComponent"/>
+  </v-input>
 </template>
 
 <script lang="ts">
+import _ from 'lodash';
 import { defineComponent, ref } from 'vue';
 
 import APIConsumerVue from '../../api_consumer/api-consumer.vue';
@@ -27,6 +30,15 @@ export default defineComponent({
     }
     return { displayComponent, setConsumer, consumer };
   },
+  computed: {
+    binds() {
+      const binds = _.cloneDeep(this.baseBinds);
+      binds['error-messages'] = binds['error-messages']
+        .filter((el: any) => !(el === undefined || el === null || !Object.keys(el).length))
+        .map((el: { [key: string]: string }) => Object.keys(el).map((key) => `${key}: ${el[key]}`));
+      return binds;
+    },
+  },
   watch: {
     modelValue(newValue) {
       this.consumer = new ConsumerLogicArray(this.field.renderParams.formComponentDef!, newValue);
@@ -41,7 +53,7 @@ export default defineComponent({
   },
   async mounted() {
     // `${this.field.renderParams.formComponentDef?.detail_url.split('/').slice(0, -1).join('/')}.componentdef`,
-    this.setConsumer(
+    await this.setConsumer(
       this.field.renderParams.formComponentDef!,
       this.modelValue as any[],
     );