Why does "isTouched" not work properly on array fields
I want to add an input to my form, which is essentially just an array of user definable strings. I noticed that error messages were not showing up after validation and I investigated. It turns out that the
isTouchedisTouched<form.Field name="product_types" mode="array">
{(field) => {
return (<>
<form.Subscribe
selector={(state) => [state.values.product_types, state.fieldMeta.product_types?.isTouched]}
children={([types, isTouched]) => (<div> {JSON.stringify([types, isTouched])}} </div>)}
/>
{field.state.value?.map?.((_, index) => (
<form.Field key={index} name={`${field.name}[${index}]`}>
{(subField) => {
const subFieldIsValid = subField.state.meta.isTouched && !subField.state.meta.isValid
return (<>
<input
id={`${field.name}-${index}`}
name={subField.name}
value={subField.state.value}
onBlur={subField.handleBlur}
onChange={(e) => subField.handleChange(e.target.value)}
/>
<button onClick={() => field.removeValue(index)}> Remove </button>
{subFieldIsValid && <FieldError errors={subField.state.meta.errors} />}
</>)
}}
</form.Field>
))}
<button onClick={() => field.pushValue('')}> + </button>
{field.state.meta.isTouched && !field.state.meta.isValid && <FieldError errors={field.state.meta.errors} />}
</>)
}}
</form.Field><form.Field name="product_types" mode="array">
{(field) => {
return (<>
<form.Subscribe
selector={(state) => [state.values.product_types, state.fieldMeta.product_types?.isTouched]}
children={([types, isTouched]) => (<div> {JSON.stringify([types, isTouched])}} </div>)}
/>
{field.state.value?.map?.((_, index) => (
<form.Field key={index} name={`${field.name}[${index}]`}>
{(subField) => {
const subFieldIsValid = subField.state.meta.isTouched && !subField.state.meta.isValid
return (<>
<input
id={`${field.name}-${index}`}
name={subField.name}
value={subField.state.value}
onBlur={subField.handleBlur}
onChange={(e) => subField.handleChange(e.target.value)}
/>
<button onClick={() => field.removeValue(index)}> Remove </button>
{subFieldIsValid && <FieldError errors={subField.state.meta.errors} />}
</>)
}}
</form.Field>
))}
<button onClick={() => field.pushValue('')}> + </button>
{field.state.meta.isTouched && !field.state.meta.isValid && <FieldError errors={field.state.meta.errors} />}
</>)
}}
</form.Field>
