1954: When calling getFormFieldValue defaults to own value if no fielName is passed

Author: Ruben van Leeuwen

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

@@ -70,14 +70,14 @@ describe('getFormFieldValue', () => {
     it('gets the value by fieldName', () => {
         const field = getPydanticFormFieldDummy({ id: 'name' });
         const fieldName = 'name';
-        const value = getFormFieldValue(fieldName, formValues, field);
+        const value = getFormFieldValue(formValues, field, fieldName);
         expect(value).toBe('John Doe');
     });
 
     it('returns undefined for unknown fields', () => {
         const field = getPydanticFormFieldDummy({ id: 'name' });
         const fieldName = 'UNKNOWN_FIELD';
-        const value = getFormFieldValue(fieldName, formValues, field);
+        const value = getFormFieldValue(formValues, field, fieldName);
         expect(value).toBe(undefined);
     });
 
@@ -104,14 +104,14 @@ describe('getFormFieldValue', () => {
         const field = getPydanticFormFieldDummy({
             id: 'company.contactPersons.0.name',
         });
-        const value = getFormFieldValue('age', complexValues, field);
+        const value = getFormFieldValue(complexValues, field, 'age');
         expect(value).toEqual(25);
 
         const field2 = getPydanticFormFieldDummy({
             id: 'company.contactPersons.1.name',
         });
 
-        const value2 = getFormFieldValue('licenses', complexValues, field2);
+        const value2 = getFormFieldValue(complexValues, field2, 'licenses');
         expect(value2).toEqual(['C']);
     });
 
@@ -129,40 +129,86 @@ describe('getFormFieldValue', () => {
             id: 'company.contactIds.0',
         });
         const valueFromFirstListElement = getFormFieldValue(
-            'age',
             complexValues,
             firstListElementField,
+            'age',
         );
         expect(valueFromFirstListElement).toEqual(30);
 
         const secondListElementField = getPydanticFormFieldDummy({
             id: 'company.contactIds.1',
         });
         const valueFromSecondListElement = getFormFieldValue(
-            'age',
             complexValues,
             secondListElementField,
+            'age',
         );
         expect(valueFromSecondListElement).toEqual(30);
 
         const nameElementField = getPydanticFormFieldDummy({
             id: 'company.name',
         });
         const valueFromNameElement = getFormFieldValue(
-            'age',
             complexValues,
             nameElementField,
+            'age',
         );
         expect(valueFromNameElement).toEqual(30);
 
         const contactIdsElementField = getPydanticFormFieldDummy({
             id: 'company.contactIds',
         });
         const ownValue = getFormFieldValue(
-            'contactIds',
             complexValues,
             contactIdsElementField,
+            'contactIds',
         );
         expect(ownValue).toEqual(['123', '456']);
     });
+
+    it('gets its own value based on the pydanticform definition if no fieldName is provided', () => {
+        const complexValues = {
+            company: {
+                name: 'John Deer',
+                age: 30,
+                contactIds: ['123', '456'],
+            },
+            age: 666,
+        };
+
+        const companyField = getPydanticFormFieldDummy({
+            id: 'company',
+        });
+        const valueFromCompanyElement = getFormFieldValue(
+            complexValues,
+            companyField,
+        );
+        expect(valueFromCompanyElement).toEqual({
+            name: 'John Deer',
+            age: 30,
+            contactIds: ['123', '456'],
+        });
+
+        const secondListElementField = getPydanticFormFieldDummy({
+            id: 'company.contactIds.1',
+        });
+
+        const valueFromSecondListElement = getFormFieldValue(
+            complexValues,
+            secondListElementField,
+        );
+
+        expect(valueFromSecondListElement).toEqual(['123', '456']);
+
+        const firstListElementField = getPydanticFormFieldDummy({
+            id: 'company.contactIds.0',
+        });
+
+        const valueFromListElement = getFormFieldValue(
+            complexValues,
+            firstListElementField,
+        );
+
+        expect(valueFromListElement).toEqual(['123', '456']);
+    });
 });

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

@@ -94,6 +94,37 @@ export const itemizeArrayItem = (
     return itemize(item, itemId);
 };
 
+/**
+ * Determines how many parts to slice from the PydanticFormField's id.
+ * If the last segment is a number we conclude it's an array item and  it returns 2 (to slice off the index and the field name).
+ * Otherwise, it returns 1 (to slice off just the field name).
+ */
+const getNumberOfPartsToSlice = (
+    pydanticFormField: PydanticFormField,
+): number => {
+    const pathSegments = pydanticFormField.id.split('.');
+    const lastSegment = pathSegments[pathSegments.length - 1];
+    return isNaN(Number(lastSegment)) ? 1 : 2;
+};
+
+/**
+ * Returns the field name extracted from the PydanticFormField's id.
+ * If the id contains a dot return the last segment, if the last segment is an integer
+ * indicating a position in an array, it will return the segment before that.
+ */
+const getFieldName = (pydanticFormField: PydanticFormField): string => {
+    if (pydanticFormField.id.includes('.')) {
+        const numberOfPartsToSlice = getNumberOfPartsToSlice(pydanticFormField);
+        return (
+            pydanticFormField.id
+                .split('.')
+                .slice(0, -(numberOfPartsToSlice - 1))
+                .pop() || ''
+        );
+    }
+    return pydanticFormField.id;
+};
+
 /**
  * This functions returns a fields value but taking into account the position
  * of the field in any tree it might be in. For example when requesting the
@@ -102,15 +133,17 @@ export const itemizeArrayItem = (
  * fields on other levels
  * */
 export function getFormFieldValue(
-    fieldName: string,
     formValues: FieldValues,
     pydanticFormField: PydanticFormField,
+    fieldName?: string,
 ) {
+    const name = fieldName ? fieldName : getFieldName(pydanticFormField);
+
     // 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);
+    const numberOfPartsToSlice = getNumberOfPartsToSlice(pydanticFormField);
+    const pathToParent = pydanticFormField.id
+        .split('.')
+        .slice(0, -numberOfPartsToSlice);
     let current: FieldValues = { ...formValues };
 
     for (const segment of pathToParent) {
@@ -123,5 +156,5 @@ export function getFormFieldValue(
         }
     }
 
-    return current?.[fieldName];
+    return current?.[name];
 }