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

FieldArray TypeScript validate handler: Types of parameters 'values' and 'allValues' are incompatible.

Open
#832 0 comments 22 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 I think, but I'm not 100% sure

Unfortunately I cannot find any clue in the docs or on StackOverflow or here in the issues or among `react-final-form-arrays` issues.

### What is the current behavior?

I cannot find out any way to declare a validate handler for a *react-final-form-arrays*'s `FieldArray` field.

My validate handler is declared as:

```tsx
function validateNtpServerList(value: string, values: SystemDateTime) {
return (value && value.length) || !values.ntp ? undefined : "The list cannot be empty";
}
```

where `SystemDateTime` is the Form values type, declared as:

```ts
type SystemDateTime = {
ntp: boolean
datetime: Date
ntpServers?: Array
}

```

And in JSX I have a declaration like:
```jsx

```
which `validate` part triggers an TS error:
```
TS2322: Type '(value: string, values: SystemDateTime) => "The list cannot be empty" | undefined' is not assignable to type 'FieldValidator'.
  Types of parameters 'values' and 'allValues' are incompatible.
    Type '{}' is missing the following properties from type 'SystemDateTime': ntp, datetime

index.d.ts(97, 3): The expected type comes from property 'validate' which is declared here on type 'IntrinsicAttributes & FieldArrayProps'
```

The validator is declared in `final-form/index.d.ts` as:
```ts
type FieldValidator = (
value: FieldValue,
allValues: object,
meta?: FieldState
) => any | Promise

```
where `allValues` is of type `object` which is indeed not compatible with my form values type which is `SystemDateTime` (see above).

I don't see any way to get it working.

### What is the expected behavior?

Accept validate handler declaration. Or have this in the docs at least.

### Sandbox Link

Here is an example:

https://codesandbox.io/s/react-final-form-arrays-validate-problem-qfgnd?file=/src/DateTimeForm.tsx
**The problem is in the 39th line.**

### What's your environment?

```
"final-form": "^4.19.0",
"final-form-arrays": "^3.0.2",
```

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.