- Default Field Types
- API
FormGenerator : React.ComponentType<FormGeneratorProps>getSectionErrors: (options: SectionValidOptions) => ObjectisSectionFilled: (options: SectionFilledOptions) => booleanisSectionEmpty: (options: SectionEmptyOptions) => booleangetFieldPath: (options: FieldValidatorOptions) => stringisFieldHidden: (options: FieldValidatorOptions) => booleanisFieldVisible: (options: FieldValidatorOptions) => booleanisFieldRequired: (options: FieldValidatorOptions) => booleanisFieldDisabled: (options: FieldValidatorOptions) => booleanisFieldEmpty: (options: FieldValidatorOptions) => booleanisFieldFilled: (options: FieldValidatorOptions) => booleanisFieldValid: (options: FieldValidatorOptions) => booleanmapFieldChildren: (options: FieldValidatorOptions) => Array<FieldType>getDefaultValues: (options: GetDefaultValuesOptions) => ObjectinjectGenProps: (React.ComponentType<ReduxForm>) => React.ComponentTypebuildLookupTable: (options: BuildLookupTableOptions) => LookupTableisNilOrEmpty: (any) => boolean
- Types
FormGeneratorPropsFieldTypeConditionalObjectquestionId: stringequals?: mixedand?: Array<ConditionalObject>or?: Array<ConditionalObject>not?: ConditionalObjectfilled?: booleanincludes?: mixed | Array<mixed>greaterThan?: numberlessThan?: numbergreaterThanEqual?: numberlessThanEqual?: numberlength: numberminLength: numbermaxLength: numberpobox: booleanemail: booleanregex: boolean- value : alias of
equals - lt : alias of
lessThan - gt : alias of
greaterThan - max : alias of
lessThanEqual - min : alias of
greaterThanEqual
FieldOptions_genFieldComponent?: React.ElementType_genLabelComponent?: React.ElementType_genComponent?: React.ElementType_genWrapperComponent?: React.ElementType_genChildren?: FieldsType_genDefaultValue?: mixed_genIsFilled?: Function_genIsValid?: Function_genSectionErrors?: Function_genTraverseChildren?: Function_genSkipChildren?: boolean_genSkipCache?: boolean_genHidden?: boolean- (...) props for
_genFieldComponent
type: string- the type of the field. you can add more type usingcustomFieldTypesprop on the<FormGenerator />.label: string- the label for the fieldchildFields: [FieldType]- an array of child fields. If the parent field is invisible,childFieldswill also be invisible. useful for thesectionandgrouptypes.conditionalVisible:ConditionalObject- the evaluated ConditionalObject controls whether a field and it's childFields are visible
Extends GenericProps
questionId: - thenameproperty for a field. supports dot-notationrequired: boolean- mark the field as requireddisabled: boolean- mark the field as disabled (also skips required validation)conditionalRequired:ConditionalObject- the evaluated ConditionalObject controls whether a field is requiredconditionalDisabled:ConditionalObject- the evaluated ConditionalObject controls whether a field is disabled (also skips required validation)
Extends GenericFieldProps. Renders a native <input type="text" /> component.
Extends GenericFieldProps. Renders a native <textarea> component.
Extends GenericFieldProps. Renders a native <input type="radio" /> component.
Extends GenericFieldProps. Renders a native <select> and <option> component.
options: [ { label: string, value: string } ]- an array of<option>s to render.
Extends GenericFieldProps. Uses ReduxForm FieldArray component, and renders each item, as an arrayItem type.
item: (FieldType: arrayItem)- thearrayItemtype that thearraywill use to render each item.addLabel- the label for theAddbutton for adding a new item to the array.
Extends GenericProps
label: string- supports templates for{index}and{indexOverTotal}ex:label: "Item {index}"
Extends GenericProps. Renders a extra label for grouping fields.
Extends GenericProps. Renders a header for grouping fields.
These are the library exports.
isFieldHidden: (options: FieldValidatorOptions) => boolean
does the heavy lifting to validation, defaultValues, and lookupTable. injects props into a reduxForm decorated component
(initialValues, validate) and uses getDefaultValues and getSectionErrors
checks if something is nil or empty (runs trim on strings);
For advanced use cases only, this object has keys which represent questionIds, and the values are a props object which will be spread onto the matching field. This should really only be used when passing custom event handlers. 99% of the time you should implement this inside of your custom field type definition.
Will pass the disabled prop to all fields in the form.
A dot-notation string representing the redux-form Field name prop.
An array of childFields. These fields will show/hide if the parent is visible/hidden.
Controls whether a field and it's childFields are visible
Controls whether a field is required
Controls whether a field is disabled
Used to check if a field is valid
If the field is required, this will override the global REQUIRED_MESSAGE
If the field is invalid, this will override the global INVALID_MESSAGE
An object, when evaluated against data, resolves to a true or false value.
defaults to the parent question, use this to override
lodash _.isEqual(value, param)
an array of Conditional Objects that are logical &&'d together
an array of Conditional Objects that are logical ||'d together
takes the opposite of the specified Conditional Object (! operation)
if true, returns !isNilOrEmpty(value)
used to check if an array includes the specific param. runs lodash _.includes(value, param) under the hood.
value > param
value < param
value >= param
value <= param
value.length === param
value.length >= param
value.length <= param
check if the value looks like a pobox
check if the value looks like an email address
text the value against the regex param
The compare operator is useful when comparing the value of a field to the value of another field instead of a fixed value. It accepts all the operators, except instead of providing a fixed value, you provide a questionId as the value. the compare operator will lookup the data for that questionId and evaluate the conditional object.
In this example, we have a min/max fields which reference each other for their upper/lower bounds.
{
type: 'text',
questionId: 'minQuestionId',
conditionalValid: {
compare: {
lessThanEqual: 'maxQuestionId'
}
}
},
{
type: 'text',
questionId: 'maxQuestionId',
conditionalValid: {
compare: {
greaterThanEqual: 'minQuestionId'
}
}
}
This is the redux-form Field, Fields, or FieldArray component that this should use to render
The component to use when rendering the label. Internally uses GenericRequiredLabel.
The component to use if you're not rendering a redux-form field component (using _genFieldComponent)
If provided, it will be passed props from GenField as well as the pre-rendered labelComponent, fieldComponent, and component
If inner fields are not represented by childFields, you use this property to expose those inner fields to traversals.
The value to use when calculating default values for the form. (getDefaultValues())
fn({data, field, lookupTable, customFieldTypes}) => bool
Use this property to create a custom isFieldFilled function for this field type. Should return a boolean.
fn({data, field, lookupTable, customFieldTypes}) => bool
Use this property to create a custom isFieldValue function for this field type. Should return a boolean.
fn({errors, data, field, lookupTable, customFieldTypes}) => void set in errors
Allows a field type to set custom errors in the entire errors object during validation.
fn({iterator, data, lookupTable}) => something.map((field) => iterator({field, data, lookupTable}))
Use the provided iterator to traverse over complex children.
skip rendering of childFields
skip clearing/restoring the field value when change in visibility happens
_genHidden?: boolean
skip rendering of this field and all it's children.
all props that aren't prefixed with _gen will get passed to the rendered _genFieldComponent. (such as name, names, component, etc).