2. Basic usage
If you read the documentation of the final-form libary you will know that you will need the Field Component to render form elements. This library simply extends Field. This abstraction is called Field as well. Field wraps final-form’s Field, and combines synchronous and asynchronous validation rules into an array of validators accepted by final-form’s Field.
For example:
const isRequired = (value) => value && value.length > 0 ? undefined : 'This field is required';
const isUsernameAvailable = (value) => {
const response = fetch('your-api/username-available', {
method: 'POST',
body: JSON.stringify({ value })
});
return response.json().available ? undefined : 'Username is already used';
}
<Field
name="username"
validators={[ isRequired ]}
asyncValidators={[ isUsernameAvailable ]}
component="input"
type="text"
/>