final-form / final-form/react-final-form
Field error state not resetting on dynamic array field
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
BUG REPORT!
### What is the current behavior?
```
/**
* This is the complex field
*/
export function ChemicalPropertyField({
className,
name,
information,
values,
change,
}) {
const [propsTracker, setPropsTracker] = useState(EMPTY_ARRAY);
useEffect(() => {
if (values.length > 0) {
if (propsTracker.length === 1) {
setPropsTracker(Object.keys(values).map((key) => parseInt(key, BASE_10_RADIX)));
}
} else {
// Start with 0 fields showing
change(name, EMPTY_ARRAY);
setPropsTracker(EMPTY_ARRAY);
}
}, [values]);
return (
{values.map((prop, idx) => (
{prop.chemicalProperty || `Property ${idx + 1}`}
{
const newProperties = [
...values.slice(0, idx),
...values.slice(idx + 1),
];
change(name, newProperties);
setPropsTracker([
...propsTracker.slice(0, idx),
...propsTracker.slice(idx + 1),
]);
}}
/>
))}
{
change(name, [...values, {}]);
const newPropsTracker = propsTracker.length === 0 ? [0] : [...propsTracker, propsTracker[propsTracker.length-1] + 1]
setPropsTracker(newPropsTracker);
}}
>
Add property
);
}
/**
* This is the validator function that we use on the whole form
*/
const CHEMICAL_PROPERTIES_ERROR = {
maxValue: "Please enter a min OR a max value.",
minValue: "Please enter a min OR a max value.",
};
export function validator(formData) {
const errors = {};
if (formData.chemicalProperties) {
formData.chemicalProperties.forEach((prop, index) => {
if (prop.chemicalProperty && !prop.minValue && !prop.maxValue) {
errors.chemicalProperties = errors.chemicalProperties || [];
errors.chemicalProperties[index] = CHEMICAL_PROPERTIES_ERROR;
}
});
}
return errors;
}
/**
* This is the form
*/
function PropertiesForm({
form,
handleSubmit,
values,
}) {
return (
);
}
/**
* This is the Page
*/
function Page() {
return (
)
}
```
After a custom field has failed validation for having a name but no min or max, when I enter a value into the "minValue" field, it does not clear the error state of the "maxValue" field.
### What is the expected behavior?
After attempting to submit a property with no min OR max, adding only a min should clear the error state for both min and max.
### Sandbox Link
### What's your environment?
"final-form": "^4.20.2",
"react-final-form": "^6.5.3",
Node 14
NextJS
"react": "17.0.2",
### Other information
Contributor guide
Assessment
This issue has not been assessed yet.