diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 2c70c1e..b815a31 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -129,6 +129,8 @@ export function FormExamples() {
});
}}
transform={(formData, _, update) => {
+ console.log('transform >> formData:', formData);
+
formData.__v = formData.__v ? formData.__v + 1 : 1;
update(formData);
@@ -141,14 +143,17 @@ export function FormExamples() {
validations={validations}
customActions={
useCustomActions
- ? (isSubmiting, { onCancel, resetForm }) => (
+ ? (isSubmiting, { onCancel, resetForm, clearForm }) => (
-
)
: undefined
@@ -757,6 +762,7 @@ export function FormExamples() {
/>
+
);
}
@@ -765,7 +771,7 @@ const ResetForm = () => {
const formControl = useFormControl();
const reset = () => {
- console.log('reset form');
+ console.log('reset form - resets to initial state');
formControl.resetFormData();
};
@@ -777,6 +783,22 @@ const ResetForm = () => {
);
};
+const ClearForm = () => {
+ const formControl = useFormControl();
+
+ const clear = () => {
+ console.log('clear form - sets empty state');
+
+ formControl.clearFormData();
+ };
+
+ return (
+
+ Clear form
+
+ );
+};
+
const FormSwitchExample = () => {
const autocompleteField1FormControl = useFormControl('autocompleteField1');
diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx
index 23ded04..c0b0c7d 100644
--- a/src/forms/Form.jsx
+++ b/src/forms/Form.jsx
@@ -22,6 +22,7 @@ export function Form({
const formRef = useRef(null);
const [isSubmiting, setIsSubmiting] = useState(false);
+ /* Resets to initial values/state */
function resetForm() {
if (formRef.current && formRef.current.classList) {
formRef.current.classList.remove('was-validated');
@@ -30,6 +31,14 @@ export function Form({
formState.reset();
}
+ function clearForm() {
+ if (formRef.current && formRef.current.classList) {
+ formRef.current.classList.remove('was-validated');
+ }
+
+ formState.clear();
+ }
+
function handleSubmit(e) {
e.preventDefault();
e.stopPropagation();
@@ -76,7 +85,17 @@ export function Form({
);
}
diff --git a/src/forms/FormActions.jsx b/src/forms/FormActions.jsx
index 9bb07c1..4a41bf8 100644
--- a/src/forms/FormActions.jsx
+++ b/src/forms/FormActions.jsx
@@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { isFunction } from 'js-var-type';
-export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, customActions, resetForm }) {
+export function FormActions({ submitLabel, cancelLabel, clearForm, onCancel, isSubmiting, customActions, resetForm }) {
if (customActions) {
- return isFunction(customActions) ? customActions(isSubmiting, { onCancel, resetForm }) : customActions;
+ return isFunction(customActions) ? customActions(isSubmiting, { clearForm, onCancel, resetForm }) : customActions;
}
return (
@@ -22,6 +22,7 @@ export function FormActions({ submitLabel, cancelLabel, onCancel, isSubmiting, c
FormActions.propTypes = {
submitLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
cancelLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+ clearForm: PropTypes.func,
onCancel: PropTypes.func.isRequired,
isSubmiting: PropTypes.bool,
customActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
diff --git a/src/forms/helpers/useForm.js b/src/forms/helpers/useForm.js
index 00e73ac..35f594f 100644
--- a/src/forms/helpers/useForm.js
+++ b/src/forms/helpers/useForm.js
@@ -44,15 +44,30 @@ function useFormState(initialState, { onChange, transform }) {
return nextFormState;
});
},
+ /* Resets to initial values/state */
resetState() {
setIsDirty(false);
setFormState(initialState);
},
+ /* Sets empty state */
+ clearState() {
+ setIsDirty(true);
+
+ setFormState(() => {
+ const nextFormState = {};
+
+ setTimeout(() => {
+ transformRef.current(nextFormState);
+ });
+
+ return nextFormState;
+ });
+ },
};
}
export function useForm(initialState, { validations, onChange, transform }) {
- const { getState, updateState, resetState } = useFormState(initialState, { onChange, transform });
+ const { getState, updateState, resetState, clearState } = useFormState(initialState, { onChange, transform });
const [submitAttempted, setSubmitAttempted] = useState(false);
const [, setRefreshForm] = useState(false);
const { getAllKeys: getElementNames, get: getElementRefs, push: registerElementRef } = useArrayValueMap();
@@ -125,6 +140,9 @@ export function useForm(initialState, { validations, onChange, transform }) {
getValue(name) {
return getValueByPath(formState, name);
},
+ clear() {
+ clearState();
+ },
reset() {
resetState();
setSubmitAttempted(false);
diff --git a/src/forms/helpers/useFormControl.js b/src/forms/helpers/useFormControl.js
index bff92e9..228d5ae 100644
--- a/src/forms/helpers/useFormControl.js
+++ b/src/forms/helpers/useFormControl.js
@@ -48,7 +48,8 @@ export function useFormControl(name, type) {
handleOnChange,
register,
getFormData: () => formState.getFormData(),
- resetFormData: () => formState.reset(),
+ resetFormData: () => formState.reset() /* Resets to initial values/state */,
+ clearFormData: () => formState.clear() /* Sets empty state */,
isValid: () => formState.getValidationMessage(name) === '',
getFormSubmitedAttempted: () => formState.getSubmitedAttempted(),
};