如何在呈现后在formik中触发验证？
如何在呈现后在formik中触发验证？
提问于 2019-10-08 21:18:14
我和formik有一个问题。基本上，我将有一个表，其中列出了所有存在错误的表单的Id。当用户单击表单的Id时，它将显示表单本身。要求是在呈现表单时也应该显示错误。有人知道怎么用Formik吗？此外，如果用户编辑字段，字段验证应该正常工作。
我把密码箱链接放在这里。https://codesandbox.io/s/pensive-brattain-yyls2。基本上，我希望当表单出现时，我应该看到错误，而不仅仅是当用户从字段移开或更改时。谢谢。
import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";
class Post0 extends React.Component {
validateEmptyName(value) {
if (!value) {
return "Invalid Name";
}
}
render() {
return (
<div>
<Formik
initialValues={{
email: "",
animal: ""
}}
onSubmit={values => {
this.props.nextStep(values);
}}
render={({ values, isSubmitting }) => (
<Form>
<Field
name="email"
type="email"
value={values.email}
component={TextField}
variant="outlined"
validate={this.validateEmptyName}
/>
<Field
name="animal"
value={values.animal}
component={TextField}
variant="outlined"
/>
<button type="submit">Submit</button>
</Form>
)}
/>
</div>
);}}
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-10-09 01:53:32
我使用自定义输入组件制作了一个基本演示版本。Formik没有内置的选项来实现这一点，因此不幸的是，您需要创建自己的字段组件来与Formik的道具集成，并绕过如果表单不被触摸就不会显示验证的逻辑。
const Input = ({ field, form }) => {
useEffect(() => {
form.validateForm();
}, []);
return (
<div>
<input
style={{
border: form.errors[field.name] ? "1px solid red" : "1px solid #ccc"
}}
name={field.name}
value={field.value}
onChange={field.onChange}
/>
{form.errors[field.name] && (
<span style={{ color: "red" }}>{form.errors[field.name]}</span>
)}
</div>
);
};然后将其作为component支柱传递到您的<Field/>上。
Formik确实提供了一个isInitialValid支柱，您可以在主Formik组件上将其设置为false，但是您使用的库TextFields在没有touched支柱的情况下不会显示任何内容。
Stack Overflow用户
发布于 2021-02-12 08:29:18
Stack Overflow用户
发布于 2021-11-03 15:36:32
如果您也添加了validateOnMount，则可以使用initialTouched，但是当它在提交后显示验证问题时有限制(...or最好说是bug)，这不会导致不同的视图或组件。
我发现了相当优雅的解决办法，如预期的那样起作用。
const formikRef = React.useRef(null);
React.useEffect(() => formikRef.current.validateForm(), []);
return (
<Formik
innerRef={formikRef}
initialValues={props.customer}
initialTouched={mapObject(props.customer, true)}
onSubmit={values => {
.
.
.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58294208
复制相关文章
相似问题
腾讯云开发者
