Correct way of using getValues?

[CallumVass]

Hi,

First of all, this is a great library so thanks for that!

I'm building a component alongside my form which has nested values (so a lot of FieldArrays inside FieldArrays) which allows a user to preview what they currently have put but I'm having difficulty in generating the preview with the values that the user has put into their form. I have created a sample on stackblitz here: https://stackblitz.com/edit/modular-forms-qwik-zawnn3?file=src%2Fcomponents%2FPreviewPane.tsx (I am rendering this component under the nested route)

I'd be grateful if you could take a look to tell me where I'm going wrong? The error I get is Cannot invoke an object which is possibly 'undefined'. even tho I am checking that its not undefined?

Thank you

[fabian-hiller]

Thank you for creating this issue. I will have a look at your code on Monday.

[CallumVass]

Hi, thanks for the reply but I think I've resolved it. Because whats being returned from getValues is an Object, rather than an array - I've done this:

 {Object.keys(items).map((key) => {
          const item = items[+key];
          return (
            item && (
              <div key={key}>
                Item {key}: {item.label}
              </div>
            )
          );
        })}

If this is the correct way to handle it, then feel free to close this issue.

[fabian-hiller]

The debugger in our playground does the same to display the current form values. If you just want the values of a field array, you can specify its name as the second parameter of getValues. Then you get an array back.

I recommend using primarily the Field component and field.value to display the values of the fields in the UI and only if there is no other way or if it makes more sense, fallback to getValues.

[fabian-hiller]

I'm closing this issue with the assumption that you were able to find a solution. If not, feel free to give me an update here. I can then reopen the issue.