final-form / final-form/react-final-form

Array field level validation still not working

Open
#382 6 comments 19 reactions 0 assignees View on GitHub
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?

I've been trying to validate a form with an array field. It works for the most part, but when I need to show an error in array field level, it crashes with *Cannot set a numeric property on an object*. I'm using FieldArray component.

I've tried 2 approaches to validate the form:
1. Using schema validation: The way I'm doing it in my project, by validating the whole form using schema validation (with ajv) which takes charge of generating the error object.
Demo1: https://codesandbox.io/s/9yo1oz74yo
2. Using form and field validation with validation functions.
Demo2: https://codesandbox.io/s/4r9jmxwql4

The problem comes when you have validation for the FieldArray and, also, for the fields inside each item of the array. When this happen, the validation object goes form an array (with the errors for each array item) to an object/string (to show the FieldArray validation error) and that's why I thinks it's crashing:

**Error object from the Demo1**
![image](https://user-images.githubusercontent.com/7680090/48932567-f7b7fe80-eefc-11e8-82c4-e7fbd465fb46.png)

**Steps to reproduce the bug** (both demos)
- Add 1 customer
- Fill "lastName" input -> The validation triggers and it warns you about "firstName" being required
- Remove the customer -> The validation object contains the message of "min 1 customer"
- In this point, it crashes

### What is the expected behavior?

What I hoped was that FinalForm could represent both FieldArray level validation message and the array item fields messages (not necessarily at the same time). For example: be able to show that 1 customer is the minimum required amount and, besides, show that the field "firstName" is required in the first element of the array.

### What's your environment?

final-form: 4.11.0
final-form-arrays: 1.1.0
react-final-form: 4.0.2
react-final-form-arrays: 2.0.1
react: 16.6.3
Browser: Chrome 69.0.3497.100

### Other information

I've seen these related issues but for me there's no clear solution in them
- https://github.com/final-form/final-form/issues/35 (I cannot treat the array as an Object as stated here, because of the schema validation)
- https://github.com/final-form/react-final-form/issues/160 (Not fully undestanding the ARRAY_ERROR use)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.