[PF4] - Fixing server errors on an input does not re-validate the form.

[steverhoades]

Scope: PF4 @data-driven-forms/pf4-component-mapper@3.23.2 @data-driven-forms/react-form-renderer@3.23.2

Description When returning an error from the server it correctly sets the error on the form input. However when one changes the value of the input the form does not re-validate the input thus the valid state of the form is always false.

Form Template

  const FormTemplate = ({ formFields, schema }) => {
    const { handleSubmit, getState } = useFormApi();
    const { valid } = getState();

    return (
      <form onSubmit={handleSubmit}>
        {schema.title}
        {formFields}
        <FormSpy subscription={{ values: true }}>
          {() => (
            <div style={{ marginTop: 8, marginRight: 10 }}>
              <Button
                isLoading={mutation.isLoading}
                isDisabled={mutation.isLoading || !valid}
                style={{ marginRight: 8 }}
                type="submit"
                variant="primary"
              >
                {mutation.isLoading ? "Saving" : "Submit"}
              </Button>
            </div>
          )}
        </FormSpy>
      </form>
    );
  };

Schema

{
    "fields":
      [
        {
          "component": "sub-form",
          "name": "metadata",
          "style": subFormStyle,
          "fields": [
            {
              "component": "sub-form",
              "name": "metadata",
              "style": subFormStyle,
              "fields": [
                {
                  "component": "select",
                  "name": "category_ids",
                  "label": "Category",
                  "placeholder": "None",
                  "type": "select",
                  "isRequired": false,
                  "isSearchable": true,
                  "isMulti": true,
                  "options": Object.values(options)
                },
                ...other fields
              ]
            }
          ]
        }
      ]
  }

v

[steverhoades]

It appears to be an issue with my version of FormTemplate as reverting back to the provided FormTemplate it does in fact allow for the form to be submitted properly.