React-React最终表单验证

Question

在使用记录级验证时，我有一个关于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>
)}
/>

那么，从本质上讲，你将如何为这样的字段名设置错误消息：

"field.password"；

我看过一些例子，但没有骰子。另一种选择是现场级验证，这是我作为解决方案一部分的最后手段。

如有任何帮助，将不胜感激

感谢

Answer 1

你试过吗

validationErrors.errors['field.password'] = "password is too short";

编辑尝试此

if (!values.field || !values.field.password) {
errors.field = {password: 'Required'};
}