Appending to FieldArray component

[Ali-Zmn]

Hi, before my question I want to thank you for your great library and your efforts to support and keep it updated.

I have a custom field array which its default values are set from other components based on some conditions. For example, in this sandbox, it is based on the text field if the value given is '3'.
It works fine if I want to set/replace the whole field array with a given value but how can I append to it?

in the example provided, the field array initial values are 1 -> one and 2 -> two or whatever user type, and I want to append the 3->three if I write 3 in the text field, how can I achieve this?

Code Exaple: codesandbox

Thanks

[rvsia]

@Ali-Zmn Hello,

This is not possible using condition. I recommend to implement a custom value listener.

cc @Hyperkid123 maybe what we could do in the future is to provide some setFn: { field: (prevValue) => [...prevValue, ...newValue] } as a new feature in conditions. note: setFn so we won't break any user implementation in case they set a function as the value, but I find that very unlikely, so maybe we could just provide this functionality to set.

[rvsia]

You could also use the condition to check length of the value, but I guess that would make the condition schema too complicated. That was one of the reasons I proposed a javascript function to do that, conditions were not meant to solve complex issues like this, using a custom value listener is probably much easier thing to do.

[Hyperkid123]

I see. Well, the push/unshift events should only trigger when the condition is met. The question is what is supposed to happen when the value dependency is changed to a different value. And that is really a custom component territory.

I think I am inclining toward enabling the set attribute to be a function as well as an object instead of creating a new setFn attribute. I don't want to deal with the situation when you might have both set and setFn defined in one condition. This would follow a pattern we use with other attributes.

And passing a formApi as an argument should be enough to get all the required data and functions.

type snippet = {
   when: string;
   is: any;
   // use formApi to mutate the state "formApi.change('fieldName', [...formApi.getState().values['fieldName'], {foo: 'bar'}])"
   then: { visible?:boolean; set?: ((formApi: FormApi) => void) | object };
   else: { visible?: boolean; set?: object };
   ...
},

[Ali-Zmn]

@Hyperkid123 I think what you're saying makes sense. It gives more flexibility as well.

[Hyperkid123]

Cool. I will open a new issue and hopefully, we can knock this one quickly. I am on vacation until 26th so sorry in advance for the lack of response or any immediate progress. Alternatively @Ali-Zmn you can take a stab at it if you'd like.

[Hyperkid123]

#1326