React - react-final-form validation

Question

I have a question regarding react-final form error message when using record-level validation. I have the following field present within FormFilterFields component.

Field Names:

export const fieldNames = {
  password: "field.password"
};

Field:

            <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:

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

So essentially how would you set the error message for a field name like so:

"field.password"

I have looked at some of the examples but no dice.The alternative would be field level validation which is my last resort as part of my solution.

Any help would be much appreciated

Thanks

Answer 1

Did you try

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

Edit Try this

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