Merge pull request #116 from workfloworchestrator/1954-get-value-in-field

1954 get value in field

Author: DutchBen

frontend/.changeset/evil-worms-yawn.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes getFormFieldValue to handle arrayItem fields better

frontend/packages/pydantic-forms/src/utils.spec.ts

@@ -81,7 +81,7 @@ describe('getFormFieldValue', () => {
         expect(value).toBe(undefined);
     });
 
-    it('gets the value at the right level ', () => {
+    it('gets the value at the right level from an array of objects', () => {
         const complexValues = {
             company: {
                 name: 'John Deer',
@@ -114,4 +114,55 @@ describe('getFormFieldValue', () => {
         const value2 = getFormFieldValue('licenses', complexValues, field2);
         expect(value2).toEqual(['C']);
     });
+
+    it('gets the value at the right level from an array item', () => {
+        const complexValues = {
+            company: {
+                name: 'John Deer',
+                age: 30,
+                contactIds: ['123', '456'],
+            },
+            age: 666,
+        };
+
+        const firstListElementField = getPydanticFormFieldDummy({
+            id: 'company.contactIds.0',
+        });
+        const valueFromFirstListElement = getFormFieldValue(
+            'age',
+            complexValues,
+            firstListElementField,
+        );
+        expect(valueFromFirstListElement).toEqual(30);
+
+        const secondListElementField = getPydanticFormFieldDummy({
+            id: 'company.contactIds.1',
+        });
+        const valueFromSecondListElement = getFormFieldValue(
+            'age',
+            complexValues,
+            secondListElementField,
+        );
+        expect(valueFromSecondListElement).toEqual(30);
+
+        const nameElementField = getPydanticFormFieldDummy({
+            id: 'company.name',
+        });
+        const valueFromNameElement = getFormFieldValue(
+            'age',
+            complexValues,
+            nameElementField,
+        );
+        expect(valueFromNameElement).toEqual(30);
+
+        const contactIdsElementField = getPydanticFormFieldDummy({
+            id: 'company.contactIds',
+        });
+        const ownValue = getFormFieldValue(
+            'contactIds',
+            complexValues,
+            contactIdsElementField,
+        );
+        expect(ownValue).toEqual(['123', '456']);
+    });
 });

frontend/packages/pydantic-forms/src/utils.ts

@@ -104,9 +104,13 @@ export const itemizeArrayItem = (
 export function getFormFieldValue(
     fieldName: string,
     formValues: FieldValues,
-    field: PydanticFormField,
+    pydanticFormField: PydanticFormField,
 ) {
-    const pathToParent = field.id.split('.').slice(0, -1);
+    // Determine by the path if we are part of an array. If we are, we need to chop of one more element
+    const pathSegments = pydanticFormField.id.split('.');
+    const lastSegment = pathSegments[pathSegments.length - 1];
+    const sliceParts = isNaN(Number(lastSegment)) ? 1 : 2;
+    const pathToParent = pydanticFormField.id.split('.').slice(0, -sliceParts);
     let current: FieldValues = { ...formValues };
 
     for (const segment of pathToParent) {