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：按字段验证

1 个答案: