禁用按钮，直到所有表单字段都填写在 Formik

Posted 2023-02-21

【中文标题】禁用按钮，直到所有表单字段都填写在 Formik

【英文标题】：Disable button till all the form fields get filled in Formik

【发布时间】：2020-11-12 02:41:45

【问题描述】：

我正在使用 Formik 表单。我里面有两个字段。我需要禁用保存按钮，直到两个字段都填满。

<Formik initialValues=initialValues validationSchema=validate onSubmit=() => this.handleSubmit()>
  ( values, handleChange, handleSubmit, setValues, isSubmitting ) => (
    <form onSubmit=handleSubmit noValidate>
      <div>
        <div onClick=this.showDrawer>
          <h6>Select Company </h6>
          <input name="customer" readOnly placeholder="Select" value=values.customer type="text" />
        </div>
        <ErrorMessage component="span" name="customer" />
      </div>
      <div>
        <div onClick=this.showDrawer>
          <h6>Select Driver</h6>
          <input name="driver" readOnly placeholder="Select" value=values.driver type="text" />
        </div>
        <ErrorMessage component="span" name="driver"/>
      </div>
      <button type="submit" disabled=isSubmitting>
        Save
      </button>
    </form>
  )
</Formik>

【问题讨论】：

这能回答你的问题吗？ React formik form validation: How to initially have submit button disabled

@HarmandeepSinghKalsi 试过了，但没用

你检查了吗？ github.com/formium/formik/issues/147

@HarmandeepSinghKalsi github 中的解决方案对我有用。但是formik本身还是应该有自己的方式

如果你觉得没有办法，可以在github上开一个issue。

【参考方案1】：

<Formik initialValues=initialValues validationSchema=validate onSubmit=() => this.handleSubmit()>
  ( values, handleChange, handleSubmit, setValues, isSubmitting, dirty, isValid ) => (
    <form onSubmit=handleSubmit noValidate>
      <div>
        <div onClick=this.showDrawer>
          <h6>Select Company </h6>
          <input name="customer" readOnly placeholder="Select" value=values.customer type="text" />
        </div>
        <ErrorMessage component="span" name="customer" />
      </div>
      <div>
        <div onClick=this.showDrawer>
          <h6>Select Driver</h6>
          <input name="driver" readOnly placeholder="Select" value=values.driver type="text" />
        </div>
        <ErrorMessage component="span" name="driver"/>
      </div>
      <button type="submit" disabled=!(dirty && isValid)>
        Save
      </button>
    </form>
  )
</Formik>

【讨论】：

请解释一下这段代码是如何解决问题的。

虽然我感觉按钮部分应该是：<button type="submit" disabled=dirty && !isValid)>Save</button>

【参考方案2】：

  ( errors, ...others ) => (
  ...other components
  <button type="submit" disabled=isSubmitting || Object.keys(errors).length > 0>
    Save
  </button> )

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。