Validate array when the subField value chages, how to do it?

[samuellawerentz]

Hi thanks in advance.

I have a array, say

{ people: [{name: 'sam'}] }

Now, how do I make sure, that name is unique. I should throw a error message if there are two usernames that are same.
I use zod validation and use zod refine to validate uniqueness. I have made this to work, but the problem is, the error won't go away.

This is my implementation,
https://codesandbox.io/p/devbox/array-validation-query-67y8dv?file=%2Fsrc%2Findex.tsx

Try clicking on add person and then changing the person name.

The error is not going away. Validation should run again when I change the internal array items, which is not happening right now.

Any help on this would be appreciated. Is there any API that I should use to achieve this?

[Balastrong]

Let's look at the generic case, you have an array of objects and you're trying to run the onChange validator of the parent when values nested in the child are changed. If I got that right, what you'd need here is the onChange validation to bubble up to its parents.

Something similar but more precise (validating X while Y changes) can be achieved through Linked Fields but as of today you cannot easily link an entire array at one go.

In this specific case I'd go by manually running the validator when changing names but we might think of a new dedicated API for similar cases (like linking to entire arrays at one go).

Try by adding field.validate('change') there:

<form.Field key={i} name={`people[${i}].name`}>
  {(subField) => {
    return (
      <div>
        <label>
          <div>Name for person {i}</div>
          <input
            value={subField.state.value}
            onChange={(e) => {
              subField.handleChange(e.target.value);
              field.validate('change');
            }}
          />
        </label>
      </div>
    );
  }}
</form.Field>

[samuellawerentz]

Thanks much!! This works great for now..!