NJFFormType
export interface NJFFormType {
className?: string;
blockOnLoading?: boolean;
customLoader?: ReactNode;
actions?: {
submitButton?: ReactNode;
disableSubmitButton?: boolean;
extraButtons?: {
button: ReactNode;
/** * Any callback function */
callback?: (...args: any[]) => void;
/** * Build-in callback to clear all form fields */
reset?: boolean;
/** * If true, the reset function will attempt to reset the values back to their original (from the resetValue parameter) if applicable */
softReset?: boolean;
}[];
/** * Classes for the wrapper of the action buttons */
wrapperClassName?: string;
};
validation?: {
performValidation: boolean;
validatedConsecutively: boolean;
displayValidationPerField: boolean;
};
messages: {
success: {
display: boolean;
position: NJFNodePositionEnum;
customCallback?: (message: string) => void;
};
error: {
display: boolean;
position: NJFNodePositionEnum;
customCallback?: (message: string) => void;
};
};
resetOnSubmit?: boolean;
softResetOnSubmit?: boolean;
}
Property | Type | Description |
---|---|---|
className | string? | Classes for the form component. |
blockOnLoading | boolean? | If true, when the form awaits for the response any action will be blocked. |
customLoader | ReactNode? | NOT IMPLEMENTED IN THIS VERSION |
actions | Custom? | Parameters that customize the actions of the form, like the submit button and allows for any number of custom buttons with either built-in actions or custom callbacks. |
validation | Custom? | Parameters that customize if and how the form performs field validation. |
messages | Custom? | Parameters that customize the success and error messages of the form. |
resetOnSubmit | boolean? | If true, the fields of the form will be reset on submit. |
softResetOnSubmit | boolean? | If true, and resetOnSubmit also true, when the form is reset on submit, reset values will be used to any field that has them specified. |
* = Required
? = Optional
actions
Property | Type | Description |
---|---|---|
submitButton | ReactNode? | Will replace the built-in submit button if provided. The submit callback will be added automatically. |
disableSubmitButton | boolean? | If true, there will be no submit button. (Even if submitButton : ReactNode is provided) |
extraButtons | Array of Custom? | Parameters that allow to add custom buttons with custom actions. |
wrapperClassName | string? | Classes for styling the wrapper of all action buttons. (The submit button and any extra buttons you provided) |
extraButtons
Property | Type | Description |
---|---|---|
button | ReactNode* | The ReactNode that will be rendered as a custom component. |
callback | () => void? | Any callback function that will be triggered at onClick. |
reset | boolean? | If true, a built-in callback will be used and the fields will be reset. |
softReset | boolean? | if true, and reset is true, soft reset will be used. |
validation
Property | Type | Description |
---|---|---|
performValidation | boolean* | If true, validation rules (if any) of each field will be respected. |
validatedConsecutively | boolean* | Fields are validated top to bottom, if true the validation process will stop at the very first field that fails the validation test and only this error will be triggered. If false, the validation process will be executed for all fields and any error(s) will be triggered. |
displayValidationPerField | boolean* | If true, validation errors will appear to each of their fields (if the field properties support it) |
messages
Property | Type | Description |
---|---|---|
success.display | boolean* | If true, the form will display the success property of the NJFFormResponseType response. |
success.position | NJFNodePositionEnum* | The position (from some available options) where the message will be displayed. |
error.display | boolean* | If true, the form will display validation errors from fields. If form's validateConsecutively property is false, then only the latest error will be displayed. |
error.position | NJFNodePositionEnum* | The position (from some available options) where the message will be displayed. |