Dots inside name

[valerii15298]

While I understand it is the rare use case and small amount of people will ever need but I am curious if it is possible to dynamically use any string for the field names. I mean basically any serializable json object which is potentially received from the user input.

In case if I wanna build the form builder or something like that. Where field name could be any string(yes even empty one).

Currently as I understand I need to validate that property names do not start/end with . or [ or ]

The possible solution would be to allow name to be the array instead of a string:

<form.Field
  name={[""]}
/>

<form.Field
  name={["", "."]}
/>

<form.Field
  name={[".", ""]}
/>

...

Example Code

import { useForm } from '@tanstack/react-form'
import { createRoot } from 'react-dom/client'

export default function App() {
  const form = useForm({
    defaultValues: {
      [""]: {
        [""]: "[] => []",
        ["."]: "[] => [.]",
        [".."]: "[] => [..]",
        ["..."]: "[] => [...]",
      },
      ["."]: {
        [""]: "[.] => []",
        ["."]: "[.] => [.]",
        [".."]: "[.] => [..]",
        ["..."]: "[.] => [...]",
      },
      [".."]: {
        [""]: "[..] => []",
        ["."]: "[..] => [.]",
        [".."]: "[..] => [..]",
        ["..."]: "[..] => [...]",
      },
      ["..."]: {
        [""]: "[...] => []",
        ["."]: "[...] => [.]",
        [".."]: "[...] => [..]",
        ["..."]: "[...] => [...]",
      },
    },
  })

  return (
    <div>
      <form.Field
        name=""
        children={(field) => {
          console.log("empty", field.state)
          return <pre>empty: {JSON.stringify({ name: field.name, value: field.state.value }, null, 2)}</pre>
        }}
      />
      {"=".repeat(50)}

      <form.Field
        name="."
        children={(field) => {
          console.log("one dot", field.state.value)
          return <pre>one dot: {JSON.stringify({ name: field.name, value: field.state.value }, null, 2)}</pre>
        }}
      />
      {"=".repeat(50)}

      <form.Field
        name=".."
        children={(field) => {
          console.log("two dots", field.state)
          return <pre>two dots: {JSON.stringify({ name: field.name, value: field.state.value }, null, 2)}</pre>
        }}
      />
      {"=".repeat(50)}

      <form.Field
        name="..."
        children={(field) => {
          console.log("three dots", field.state)
          return <pre>three dots: {JSON.stringify({ name: field.name, value: field.state.value }, null, 2)}</pre>
        }}
      />
    </div>
  )
}

const rootElement = document.getElementById('root')!

createRoot(rootElement).render(<App />)