React - react-final-form 驗證

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>
        )}
      />

所以本質上你將如何為字段名稱設置錯誤消息，如下所示：

“字段.密碼”

我看過一些例子，但沒有骰子。替代方法是字段級驗證，這是我作為解決方案的一部分的最后手段。

任何幫助將非常感激

謝謝

Answer 1

你試過了嗎

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

編輯試試這個

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