Basically, I just want to get only that fields, that were changed (dirty). How should I get them inside submit handler? (I need to post only changed fields to API)
const handleSubmitSettings = (fields, formApi) => {
console.log("Submitted with fields:", fields);
};
const handleValidate = (props) => {
console.log("Validated with props:", props);
};
return (
<Form
onSubmit={handleSubmitSettings}
validate={handleValidate}
>
{({handleSubmit,form: {submit, change}}) => (
<form onSubmit={handleSubmit} className={classes.formFlexContainer}>
<SettingsHeader/>
<SettingsContainer/>
</form>
)}
</Form>
);
In your submit handler you could retrieve all registered fields via the second argument formApi
, then collect all fields marked dirty:
const onSubmit = async (values, api) => {
const dirtyOnly = {};
for (let field of api.getRegisteredFields()) {
const fs = api.getFieldState(field)
if (fs.dirty) {
dirtyOnly[fs.name] = fs.value;
}
}
// submit dirtyOnly
}
in the example above, dirtyOnly
object would contain all values from dirty fields.
But such an approach seems questionable since it may not properly handle a case with more complex state shapes.