Unform: Validating array fields

[korczas]

Hello,

I have been testing your lib for few hours and I really like it. On one of my projects we have a complex form builder which generates forms based on JSON. Lately we have some performance issue. Our bottle-neck is Formik, so I am looking for an alternative. I have recreated some code using unform, you can check it out here: https://codesandbox.io/embed/bold-hill-2ol405jn6r

I have encountered some problems with validating field arrays but I am not sure if it's yup or unform or just me. Honestly I don't have any experience with yup. Could you take a look on code?

Also I will need onBlur validation. I was thinking on passing onBlur function which will validate the field. Do you think it is possible to achieve? How about validation when one field value is dependent on another field? How it will impact on performance?

[diego3g]

Hi @korczas, great to know that you've been testing Unform.

So, can you provide me an easiest example to run? I mean by removing parts that are no important for the code to function and probably also removing the part about generating form and schema from JSON showing only the problem with array validation?

I tried to understand your example but there is too much info there.

Currently we does not support onBlur validation with Unform, we are open to pull requests implementing that feature :)

[korczas]

there was some errors in code, I have fixed them, please check if it works now

[diego3g]

Hi, the problem was with you createValidationSchema function and Scope inside render, i change it to:

const createValidationSchema = fieldsSchemas => {
  const schema = fieldsSchemas.reduce((accumulator, current) => {
    switch (current.type) {
      case "block":
        return {
          ...accumulator,
          [current.name]: yup
            .object()
            .shape(createValidationSchema(current.schema))
        };
      case "array":
        return {
          ...accumulator,
          [current.name]: yup
            .array(yup.object().shape(createValidationSchema(current.schema)))
        };
      default:
        return { ...accumulator, [current.name]: yup.string().required() };
    }
  }, {});

  return schema;
};

And the Scope to:

{items.map((el, i) => (
  <Scope key={i} path={`${this.props.name}[${i}]`}>
    {el}
  </Scope>
))}

And it worked:

[diego3g]

Closing since it seems to be solved! If you need further help please reopen the issue.

[webvirtua]

How can I remove one complex item after add? Ex:

setData({
    addresses: [
        {
             street: 'Avenue 45',
             number: 789
         },
         {
              street: 'Avenue 999',
              number: 7
          },
      ]
})
After removed item one
setData({
    addresses: [
        {
             street: 'Avenue 999',
             number: 7
         },
     ]   
})

I can change but not remove