反应 - 反应最终形式验证

如何解决反应 - 反应最终形式验证

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