单击按钮时手动触发验证(Validate Formik Form)，即使字段未动

Question

在我们的React应用程序中，我们在一个页面中有多个表单。我们使用Formik和Yup分别进行的表格和验证

目前，只有当字段/表单被触摸时，才会触发验证。我们在Formik上构建了包装器，它在模糊/聚焦事件上提交表单。

现在，要求是在一个包含多个Formik表单的页面中，单击一个按钮即可显示所有必填字段的错误。

为了进一步澄清，我的包装看起来像

const { onSubmit, className, style, ...restProps } = this.props;
return (
<div
ref={this.setContainerRef}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
tabIndex={-1}
className={className}
style={style}
>
<Formik
{...restProps}
ref={this.setFormikRef}
initialValues={this.props.currentValues}
validateOnBlur={true}
validateOnChange={false}
render={(formikProps: FormikProps<T>) => (
<>
<DirtyFormReporter onChange={this.handleDirtyFormReport} isDirty={formikProps.dirty} />
{this.props.render(formikProps, this.createEditBlurFormActions())}
</>
)}
onSubmit={this.handleSubmit}
/>
{ReactDOM.createPortal(<InputBlocker text="Updating" isEnabled={this.state.isSubmitting} />, document.body)}
</div>
);

Answer 1

有多种方法可以处理这种情况，但您可以在此处使用Formik的fieldarray。

https://formik.org/docs/api/fieldarray

当你提交时，你会得到一个数组和一个表单列表，然后你可以简单地添加和删除表单，你可以使用Yup轻松地进行验证。