javascript - React - react-final-form 验证
问题描述
在使用记录级验证时,我有一个关于 react-final 表单错误消息的问题。我在 FormFilterFields 组件中有以下字段。
字段名称:
export const fieldNames = {
password: "field.password"
};
场地:
<Field name={fieldNames.password}>
{({ input, meta }) => {
return (
<div className={styles.textInputContainer}>
<TextInput
type={"password"}
label={"password"}
value={input.value}
onChange={(event)=> {
input.onChange(event)
}}
error={meta.error}
/>
</div>
);
}}
</Field>
形式:
<Form
onSubmit={() => {}}
initialValues={this.props.formValues}
decorators={[formFilterFieldsDecorator]}
validate={values => {
const valuesObject: any = values
const validationErrors = { errors: {} };
if (valuesObject && valuesObject.field.password && valuesObject.field.password.length < 6){
validationErrors.errors.field.password = "password is too short"; //errors.field.password is undefined here
}
return validationErrors;
}}
render={({
handleSubmit,
submitting,
pristine,
values,
form,
invalid
}) => (
<form onSubmit={handleSubmit}>
<FormFilterFields
form={form}
onSubmit={event => this.props.onHandleSubmit(event, values)}
onReset={event => this.props.onHandleReset(event, form)}
/>
<pre>{JSON.stringify(values)}</pre>
</form>
)}
/>
所以本质上你将如何为字段名称设置错误消息,如下所示:
“字段.密码”
我看过一些例子,但没有骰子。替代方法是字段级验证,这是我作为解决方案的一部分的最后手段。
任何帮助将非常感激
谢谢
解决方案
你试过了吗
validationErrors.errors['field.password'] = "password is too short";
编辑 试试这个
if (!values.field || !values.field.password) {
errors.field = {password: 'Required'};
}
推荐阅读
- wix - 错误“系统管理员已设置策略以阻止此安装”,同时使用 perUser 安装实施 MSI 包
- android - 发回数据后Android导航库崩溃
- powershell - 方法调用失败,因为 [System.String] 不包含名为“saveasfile”的方法
- time-complexity - 查找给定 n 的斐波那契指数的时间复杂度
- android - 如何减少此代码的执行时间
- react-native - 如何使用 React Native expo 集成 Paypal?
- javascript - 如何正确创建网址?
- angular - 如何设置初始值以在Angular中选择formly字段
- c - 如何使用 C 将元素压入堆栈
- soap - 如何在我的java代码中添加自定义soap头以及url?