bcbca0e44a
### What? Ensures `path` is required and only present on the fields that expect it (all fields except row). Deprecates `useFieldComponents` and `FieldComponentsProvider` and instead extends the RenderField component to account for all field types. This also improves type safety within `RenderField`. ### Why? `path` being optional just adds DX overhead and annoyance. ### How? Added `FieldPaths` type which is added to iterable field types. Placed `path` back onto the ClientFieldBase type.
61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
ConfirmPasswordField,
|
|
Form,
|
|
FormSubmit,
|
|
PasswordField,
|
|
useFormFields,
|
|
} from '@payloadcms/ui'
|
|
import React from 'react'
|
|
|
|
export const ClientForm: React.FC = () => {
|
|
return (
|
|
<Form
|
|
initialState={{
|
|
'confirm-password': {
|
|
initialValue: '',
|
|
valid: false,
|
|
value: '',
|
|
},
|
|
password: {
|
|
initialValue: '',
|
|
valid: false,
|
|
value: '',
|
|
},
|
|
}}
|
|
>
|
|
<CustomPassword />
|
|
<ConfirmPasswordField />
|
|
<FormSubmit>Submit</FormSubmit>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
const CustomPassword: React.FC = () => {
|
|
const confirmPassword = useFormFields(
|
|
([fields]) => (fields && fields?.['confirm-password']) || null,
|
|
)
|
|
|
|
const confirmValue = confirmPassword.value
|
|
|
|
return (
|
|
<PasswordField
|
|
autoComplete="off"
|
|
field={{
|
|
name: 'password',
|
|
label: 'Password',
|
|
required: true,
|
|
}}
|
|
path="password"
|
|
validate={(value) => {
|
|
if (value && confirmValue) {
|
|
return confirmValue === value ? true : 'Passwords must match!!!!'
|
|
}
|
|
|
|
return 'Field is required'
|
|
}}
|
|
/>
|
|
)
|
|
}
|