How to manually set touched and dirty flags?

[DewangS]

I have a form which uses Formik. I also have a material-table on the same form. On the Material-table, I allow users to add\update\delete rows when they click on relevant buttons. While this works fine, my SAVE button which is on Formik form has a condition to enable\disable it e.g. disabled={!(isValid && touched && dirty)} ..see below. The issue is these touched and dirty flags doesn't get set when user action happens on a child component i.e. in the material-table. My question is, how do I set these parent formik elements when I open a Dialog form? I've seen references to setFieldTouched() method though don't know how to pass this method to the Dialog form as props to use it. Any idea?

<Button
variant="contained"
size="medium"
className={classes.buttonGreen}
startIcon={}
disabled={!(isValid && touched && dirty)}
onClick={submitForm}
>
Save

[onuralpbicer]

If you're using a field with onChange, you also need to set onBlur and/or onFocus for touched to work. If you want to do it manually, you can also use setFieldTouched. Those should handle touched, dirty should be set when the current value is different than the initial value

[DewangS]

Thanks any example on how to call setFieldTouched from the child components which gets opened in Dialog?