Question

我想有条件地在表单中显示错误。

formik的工作方式是，如果您更改一个字段，则所有验证都将运行，并且即使您只更改了一个字段，所有错误都会返回。

仅当该字段为TOUCHED并且我希望该字段为TOUCHED onChange时，我才想显示错误。对该字段的第一次更改应使其感动。

目前，formik正在触摸即将提交的字段。我怎么能在onChange上触摸它？

这是我当前的表单：

{!! Form::select('country', [null => 'Select Country'] + ['Albania' => 'Albania','Kosovo'=>'Kosovo','Germany'=>'Germany','France'=>'France'], null, ['class' => 'form-control']) !!}

Answer 1

要触摸Change上的Formik字段，您可以执行以下操作：

<Formik
initialValues={initialValues}
onSubmit={(values) => {
    //submit form
}}>
{({ setFieldTouched, handleChange }) => {
    return (
        <Form>
            <Field
                name="type"
                onChange={e => {
                    setFieldTouched('type');
                    handleChange(e);
                }} />
        </Form>
    )
}}

Answer 2

您好，我认为onChange是不可行的，但是当输入模糊并且您需要使用handleBlur函数：onBlur={handleBlur}时，您可以这样做。

作为对象的错误也只能在给定的[input name]有一个对象时显示。

看看在这里在文档中运行验证的时间：https://jaredpalmer.com/formik/docs/guides/validation#when-does-validation-run

Answer 3

一种解决方法是使用formik的方法getFieldMeta并传递您的字段名称，并在键入内容时调用不为null的值prop。

errorMessage={
 formikProps.getFieldMeta("username").value
  ? formikProps.errors.username
   : ""
}

React Formik +是，onChange触摸字段

3 个答案: