Using Mantine components in forms

[hakim-b]

Hello everyone! I decided to use Mantine components instead of Redwood form helper components in the SignupPage.tsx file and I get a 400 bad request error when I submit the form.

<Form onSubmit={submitData}>
            <TextInput
              name="username"
              label="Username"
              placeholder="you@mantine.dev"
              ref={usernameRef}
              required
            />
            <PasswordInput
              name="password"
              label="Password"
              placeholder="Your password"
              required
              mt="md"
              autoComplete="current-password"
            />
            <Select
              name="roles"
              label="Role"
              placeholder="Pick one"
              data={[
                { value: 'technician', label: 'Technician' },
                { value: 'customer', label: 'Customer' },
              ]}
              required
            />

            <Button fullWidth mt="xl" type="submit">
              Sign up
            </Button>
          </Form>

When working with forms in RedwoodJS? do I always have to use the helper components like <TextField/>,<PasswordField/> and <SelectField/>?

Here is the link to the GitHub repo: My repo

[dthyresson]

Hi @hakim-b …

I cloned your repo, used SQLite instead of MySQL, and created a SESSION_SECRET and at first, I didn’t get an error when signing up, but my roles were empty.

I could see in the Network request tab of my browser that roles were not being sent … just an empty string.

So, I changed to:

            <Select
              name="roles"
              label="Role"
              placeholder="Pick one"
              data={[
                { value: 'technician', label: 'Technician' },
                { value: 'customer', label: 'Customer' },
              ]}
              {...form.getInputProps('roles')} // <--- I added this
              required
            />

and then signups worked and my selected role was saved.

I’d try that and see if it works for you.