reactjs - 在 TypeScript 中的 Formik 验证中分配错误消息不起作用
问题描述
目前,我正在尝试构建一个用户输入表单,用户应该在其中输入姓名、电子邮件和密码,使用Formik
React 和 TypeScript。
处理输入本身工作正常,现在我想向输入表单添加验证功能,所以我编写了如下代码。
import { Formik, Form, Field, ErrorMessage } from 'formik';
validate(values: User){
let errors: User;
errors = values
if(!values.password){
errors.password = 'Enter a password'
} else if(values.password.length < 8){
errors.password = 'Enter at least 8 characters for your password'
}
console.log("The length of errors.password: " + values.password.length);
return errors;
}
return(
<div>
<Formik
initialValues={{ name, email, password }}
onSubmit={this.onSubmit}
validate={this.validate}
enableReinitialize={true}
>
{
(props) => (
<Form>
<fieldset>
<label>Name</label>
<Field type="text" name="name"/>
</fieldset>
<fieldset>
<label>Email</label>
<Field type="text" name="email"/>
</fieldset>
<ErrorMessage name="password" component="div"/>
<fieldset>
<label>Password</label>
<Field type="password" name="password"/>
</fieldset>
<button type="submit">Save</button>
</Form>
)
}
</Formik>
</div>
)
我想根据用户是否输入了长度足够长的密码来显示错误消息,但即使密码太短也不会显示错误消息。
我console.log
在validation
方法中添加了一个并确保调用了该方法。当密码足够长时,比如 12 个字符,该部分
console.log("The length of errors.password: " + values.password.length);
被调用并显示密码的长度,但是当长度小于 8 时,不会将字符串分配给 ,而是'Enter at least 8 characters for your password'
显示errors.password
警告。
Warning: An unhandled error was caught during low priority validation in <Formik validate /> TypeError: Cannot set property 'password' of undefined
我查看了几个 GitHub 页面和 Stack Overflow 帖子,但没有找到一个似乎与我的问题相关的帖子。
我究竟做错了什么?
相同的代码在 中运行良好JavaScript
,因为我当前的版本TypeScript
可能缺少一些东西?
解决方案
它看起来像是在 Formik 的内部验证循环期间undefined
作为参数传递给的。validate
我建议更改此行:
let errors: User;
errors = values; // why are you assigning your error object to the values?
对此:
let errors: Partial<User> = {};
我不确定为什么要将当前值分配给错误对象。如果没有错误,errors
应该是一个空对象({}
)。
使用新方法,您仍然可以获得类型安全,因为您无法将属性分配给errors
User 类型中不存在的属性:
errors.password = "Password too short"; // this is fine
errors.foo = "asdf"; // TypeError - No property "foo" in type "User"
推荐阅读
- powershell - 带有嵌入式 exe 的 Powershell 脚本
- c - 无法将 2D Char 数组写入 C 中的文件
- java - Java服务器将html页面从文件发送到浏览器
- c - 为什么我们不能在浮点数上使用 '~' 运算符
- java - 如何使用 Eclipse 安装 org.apache.commons.cli
- android - Maven项目和android依赖
- microsoft-graph-api - 仅授权权限需要管理员同意
- c# - UWP TreeView 在 treeView_Expanding 上加载元素的叶子确实会阻塞树
- ios - 更新表格单元格中的下载指示器
- sdk - 如何概括 Rally 上下文以包含来自与测试集相关联的不同项目的测试用例