Appending arbitrary fields to form?

[mplis-jetsetter]

I'd like to achieve functionality similar to the Add/Delete buttons on arrays, but instead of adding the same field to the form every time the button is clicked, I'd like the user to be able to add a field from an arbitrary list of fields.

Would something like this require support for oneOf (#52)? Would this be possible to do by creating a custom field?

[n1k0]

Yes, we'd need support for anyOf/oneOf to achieve this "automatically". It should be possible to create a custom SchemaField, where you can hook into the way JSON schemas are mapped to field components, but this is likely to be pretty tricky...

[n1k0]

Another strategy would be to generate a new schema with the new field added. The flow would be:

1. An initial schema is passed to the Form;
2. The user selects something, eg. the type of new field to render in the schema;
3. The onChange event is triggered with this new value;
4. An external function receive this information and computes a new schema accordingly;
5. That function updates the schema prop passed to the Form instance, which now reflects the appropriate new schema fields.

Might be worth a try.

[mplis-jetsetter]

That's a good idea, I'll give that a shot. I was going to try just adding a new Form instance to the page whenever a user wanted to add a new field, which seemed fine since most of the fields are more complex fields and not single-input fields. Is there any reason why that approach would be worse than the one you suggested?

[n1k0]

That'd move the complexity to listening to many Form onChange events and reconcile all the different forms data, but yeah that could work too.

[mplis-jetsetter]

Just wanted to let you know that your suggestion above was pretty much exactly what I needed. I have a form that's separate from the one that I'm building up that allows the user to select which field they'd like to add to the form. Each selection has a schema associated with it, so when the user selects a field, I add that field's schema to the form schema and re-render the form.

I'm relatively new to React so the "update state then re-render" cycle wasn't very intuitive to me, though the solution seems fairly obvious now.

[n1k0]

I'm glad you found a solution to your problem using the current API. I'm closing this now, and if you have any pointer to your implementation, feel free to link it here so other people can take inspiration :)