Initializing TanStack Form in Solid.js

Demonstrate how to set up and initialize TanStack Form in a Solid.js application, showcasing a basic form structure.

import { createSignal } from 'solid-js';
import { useForm } from '@tanstack/solid-form';

Imports the necessary functions from Solid.js and TanStack Form libraries.

function MyForm() {
  const [form] = useForm({
    // Define the initial form state
    initialValues: {
      firstName: '',
      lastName: ''
    }
  });

Initializes a new form using the useForm hook from TanStack Form, setting the initial values for the form fields.

return (
    <form onSubmit={form.handleSubmit(values => console.log(values))}>
      <input {...form.register('firstName')} placeholder="First Name" />
      <input {...form.register('lastName')} placeholder="Last Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Renders the form element with two input fields and a submit button, using the register function provided by useForm to bind input elements to the form state.

export default MyForm;

Exports the MyForm component for use in other parts of the application.