在使用记录级验证时,我有一个关于 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>
)}
/>
所以本质上,您将如何为字段名称设置错误消息,如下所示:
“字段.密码”
我查看了一些示例,但没有骰子。另一种方法是字段级验证,这是我作为解决方案的一部分的最后手段。
任何帮助将不胜感激
谢谢
答案 0 :(得分:0)
你尝试了吗
validationErrors.errors['field.password'] = "password is too short";
编辑 试试这个
if (!values.field || !values.field.password) {
errors.field = {password: 'Required'};
}