Formik：按字段验证

Question

Formik 调用验证时对所有字段进行验证。某些字段的更改会导致对表单中所有其他字段的验证执行。当我通过将验证道具传递给组件来使用独立字段验证时，就会发生这种情况。

我通过将验证道具传递给如下组件来使用字段验证：

<Field 
    type="text" 
    name={field.name}  
    placeholder={field.caption}
    options={field.options || undefined}
    label={field.caption}
    component={stringToComponentMapper[field.component]}
    type={field.component}
    validate={this.isRequired}
/>

       isRequired = value => {
        console.log(value);
       }
         <Form>
                <FieldArray
                    name='fields'
                    render = { arrayHelpers => (
                      <div>
                        {formFields.fields && formFields.fields.length > 0 &&
                         formFields.fields.map((field, index) => (
                            <div key={field.name}>
                              <Field 
                                type="text" 
                                name={field.name}  
                                placeholder={field.caption}
                                options={field.options || undefined}
                                label={field.caption}
                                component={stringToComponentMapper[field.component]}
                                type={field.component}
                                validate={this.isRequired}
                              /> 
                              <ErrorMessage name={field.name}/>
                            </div>
                         ))
                        }
                        <button type='submit' className='btn'>Submit</button>
                      </div>
                    )}
                />
              </Form>

例如：在电子邮件字段中键入时，将调用所有字段的验证。

Answer 1

Formik 中的每个字段验证并不意味着在必要时验证字段。这意味着每个字段都可以获得适合用户需求的自定义验证（例如自定义电子邮件验证等）。因此，要检查字段内的要求，您的 isRequired 函数必须更改如下：

const isRequired = (value) => {
    return !value ? "Required" : "";
}

Formik 不会在更改时单独验证每个字段，而是在发生更改时对每个字段运行验证。 此行为是库的创建者在回答此问题时的意图。

Formik：按字段验证

Formik : Validation by field

reactjs

formik