Compose forms with nested form structure

[asegarra]

The new createFormHook looks great but it appears that it only works when there's a shared data structure between the child and parent forms. The use case where this applies is when you have a section of a form that you want to make reusable. e.g.

defaultValues: {
  mailingAddress: {
    addr1: "",
    add2: "",
    city: "",
  },
  billingAddress: {
    addr1: "",
    add2: "",
    city: "",
  }
}

The only way I can think of to try to make this work currently would be with arrays but seems far from ideal and it breaks down even further depending where you render them on the screen. I think it would be great if somehow the parent form could 'scope' the child form to a specific part of the form state. I think this would make it possible to create truly reusable form components.

[crutchcorn]

This sounds like a case for a form.AppForm component, not a withForm component.

Then you could:

<form.AppForm>
    <form.AddressSubForm/>
</form.AppForm>

[asegarra]

Thanks a lot! this does look like the better option albeit at the expense of typesafety.

[fezproof]

Perhaps we can add a prefix or name to withForm components so that we can just use the existing nested forms we have written.
Something like

const AddressForm = withForm({
  validators: {
    onSubmit: addressSchema,
  },
  defaultValues: {
    addressLine: "",
    state: "",
  },
  props: {
    title: "Address",
  },
  render: ({ form, title }) => {
    return (
      <div>
        <p>{title}</p>
        <form.AppField name="addressLine">
          {(field) => <field.TextField label="First Name" />}
        </form.AppField>
        <form.AppField name="state">
          {(field) => <field.TextField label="Last Name" />}
        </form.AppField>
      </div>
    );
  },
});

function App() {
  const form = useAppForm({
    defaultValues: {
      address: {
        addressLine: "",
        state: "",
      },
      billingAddress: {
        addressLine: "",
        state: "",
      },
    },
    onSubmit: ({ value, formApi }) => {
      console.log(value);
    },
  });

  return (
    <div className="text-center">
      <form
        action={() => {
          form.handleSubmit();
        }}
      >
        <AddressForm prefix="address" title="Residential Address" form={form} />
        <AddressForm prefix="billingAddress" title="Billing Address" form={form} />
      </form>
    </div>
  );
}

[selrond]

@crutchcorn Have you thought about a better API since?

[vonazt]

@crutchcorn - this approach seems to no longer work with 1.9.0? when doing this:

 <form.Field
          name={`${subFormKey}.line1`}
          children={field => (
            <ContextTextField
              field={field}
            />
          )}
        />

i'm now getting this type error: Type error: Type 'string' is not assignable to type 'never'. for the name prop when running next build for 15.3.1 and TS 5.8.3.

FieldApi.d.ts(133, 5): The expected type comes from property 'name' which is declared here on type 'IntrinsicAttributes & FieldComponentBoundProps<Record<string, never>, never, never, FieldValidateOrFn<Record<string, never>, never, never> | undefined, ... 15 more ..., {}>'

[vonazt]

Looks like the breaking change was introduced in v1.2.4