Field
Field is the most common component.
It is used to render fully integrated form fields that ships all required methods and data.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fieldId | (string) | A (unique) identifier used to store the field data in our Redux store. | |
| initialData | (Object?) | Default field data that is used to initialize the field. The data might be overwritten by initialFields set by the wrapping Form component. |
|
| render | (Function) | A render function that renders the component shape. It's first parameter is an object containing the following properties. |
Render Properties
| Property | Type | Description |
|---|---|---|
| value | (any) | The controlled field value. |
| isEnabled | (boolean) | Indicates if the field is enabled. |
| isRequired | (boolean) | Indicates if the field is required. |
| isValid | (boolean) | Indicates if the field is valid. |
| isTouched | (boolean) | Indicates if the field is touched. (Yields true as soon as the very first user input happens, but remains false for initialization). |
| state | (Object) | The form-scoped state |
| formId | (string) | The formId passed to the wrapping Form component. |
| fieldId | (string) | The fieldId passed to the component. |
| isFormValid | (boolean) | Indicates whether the whole form is valid or not. |
| updateField | (Function) | Updates the field data. Accepts an object with isEnabled, isRequired, isTouched, isValid and value. Each value is optional though. |
| updateState | (Function) | Updates the form-scoped state. Takes an object of new state keys and merges those with the existing state. |
Example
import { Field } from 'react-controlled-form'
function Input({ value, updateField }) {
const onChange = e => updateField({ value: e.target.value })
return (
<input value={value} onChange={onChange} />
)
}
// Usage
<Field fieldId="firstname" render={Input} />
<Field fieldId="lastname" render={Input} />
Tips & Tricks
- To provide maximum accessibility, it is recommended to utilize the default DOM attributes such as
disabledandrequired. We may useisEnabledandisRequiredto set those attributes respectively. - Using
onInputinstead ofonChange,onKeyPressoronKeyDownensures that the event has the most recent value. - Field validation can easily be done within
onChange. We can then setisValidwithinupdateFieldto update the state. Altering the visual appearance depending onisValidhelps to tell the user if the field is actually valid or not. Additional, we could show an error message if it's invalid.