Field
abtract class
Description
This is the base class of all fields. Custom fields need to extend this class or any subclass.
Generic types
ValueType
Type of the maintained value
ComponentProps
Type of component props after mapping functions/state of useFluenForm
passed to mapToComponentProps
(see below)
Members
info
Most member functions return this
to enable a fluent API.
validateAfterTouchOnChange
() => Field
Configures field to trigger validation once it was touched, then always if it has changed and on submit.
This is the default
validation trigger.
validateOnChange
() => Field
Configures field to trigger validation everytime it has changed and on submit.
validateOnSubmitOnly
() => Field
Configures field to trigger validation only on submit.
mapToComponentProps
(args: ComponentPropsMapperArgs) => ComponentProps
Since this function is abstract
it needs to be implemented by each subclass.
This member is only relevant when adding custom fields and receives a parameter with following properties:
value: ValueType
: the current value stored in state ofuseFluentForm
. Map this to the value prop of your component.setValue(v: ValueType)
: whenever your component changed its value, this function should be called (often it's anonChange
-like event)setTouched(value: boolean = true)
: call this function when your component has been touched. For most cases this function should be called when theonBlur
event was triggered.
Following is an example implementation of a clearable custom text field, which makes use of mapToComponentProps
.
It's recommended to add custom fields using addField
.