😸

Formikでバリデーションが通っていないとき&フォームの内容が更新されていないときはSubmitボタンをdisableにする方法

2023/01/28に公開

React

TypeScript

Formik

tech

Formikで
・バリデーションが通っていないとき
・フォームの内容が更新されていないとき
にSubmitボタンをdisableにする方法です。

import { Formik, Form, Field } from "formik";

export const MyApp = () => {
  return (
    <Formik
      initialValues={{ name: "" }}
      onSubmit={(values, actions) => {
        console.log({ values, actions });
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
      }}
    >
      {({ isValid, dirty }) => (
        <Form>
          <Field id="name" name="name" placeholder="name" />
          <button type="submit" disabled={!(isValid && dirty)}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

参考

Discussion