Providing defaults to array control element


I am pretty sure I am missing something, but I am wondering how you would use an array control and add elements with defaults once you hit an add button. I tried to use

this.addItem(composePaths(this.control.path, this.$,

And it adds an element to the array, but does not add it to the data object, which in that case makes it hard for us to save it. I looked it up in the code and if I understand it correctly I should be able to call handleChange() which should then make it appear in the data object, but it only imports the DispatchPropsOfArrayControl which does not provide a handleChange method?

Is this even the correct approach?

Greetings and thanks,

Hi @DanielBog,

the addItem method expects the path to the array. In the code snipped the path is amended with some this.$ index which points into the array. Can you try just handing over the path without the composePaths?

You can see this in action for example in the Vuetify renderer set here.

Hey Stefan,

thanks for the answer. Leaving out the compose path of course makes sense but the bigger problem was my stupidity. We have custom renderers which expect default values defined in the schema and I would have expected the createDefaultValue method to make use of them. For this to work I just had to create a custom createDefaultValue method which uses these custom properties.

Nevertheless I am curious on how you would solve this issue and if it would not make sense to include a default property for control elements and enhance the createDefaultValues method to use them if they exist.

Greetings and thanks for the amazing framework,

Hi @DanielBog,

Yes, createDefaultValue is very simplistic at the moment. Whenever we require default support we usually use AJV as it already offers the option to fill-in default values during validation. This then also works in combination with createDefaultValue. See here for more information.

1 Like

This was exactly what I was looking for. Thank you very much.