Solid Form
Hi everyone
I'm trying to use
This is my form:
solid-form for the first time, but I'm facing this error:
[vite] Error when evaluating SSR module src/routes/contactos.tsx?pick=default&pick=$css: failed to import "solid-forms"
|- /node_modules/.pnpm/[email protected][email protected]/node_modules/solid-forms/dist/public-api/index.module.js:1
import { isAbstractControlContainer } from 'solid-forms/core';
[vite] Error when evaluating SSR module src/routes/contactos.tsx?pick=default&pick=$css: failed to import "solid-forms"
|- /node_modules/.pnpm/[email protected][email protected]/node_modules/solid-forms/dist/public-api/index.module.js:1
import { isAbstractControlContainer } from 'solid-forms/core';
function ContactFormSection() {
return (
<form onSubmit={handleSubmit} class={'space-y-4'}>
<BaseInput
name={'name'}
control={group.controls.name}
id={group.controls.name.id.toString()}
/>
<BaseInput
type={'email'}
name={'name'}
control={group.controls.email}
pattern={'^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'}
id={group.controls.email.id.toString()}
/>
<BaseInput
type={'tel'}
name={'phone'}
control={group.controls.phone}
pattern={'d{9}'}
id={group.controls.phone.id.toString()}
/>
<TextArea
name={'message'}
control={group.controls.message}
id={group.controls.message.id.toString()}
/>
<Checkbox name={'acceptance'} id={group.controls.acceptance.id.toString()}>
I accept the terms and conditions
</Checkbox>
</form>
);
}
function ContactFormSection() {
return (
<form onSubmit={handleSubmit} class={'space-y-4'}>
<BaseInput
name={'name'}
control={group.controls.name}
id={group.controls.name.id.toString()}
/>
<BaseInput
type={'email'}
name={'name'}
control={group.controls.email}
pattern={'^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'}
id={group.controls.email.id.toString()}
/>
<BaseInput
type={'tel'}
name={'phone'}
control={group.controls.phone}
pattern={'d{9}'}
id={group.controls.phone.id.toString()}
/>
<TextArea
name={'message'}
control={group.controls.message}
id={group.controls.message.id.toString()}
/>
<Checkbox name={'acceptance'} id={group.controls.acceptance.id.toString()}>
I accept the terms and conditions
</Checkbox>
</form>
);
}
1 Reply
And the group:
I'm trying to switch to tanstack forms, but now my page renders empty 😦
const group = createFormGroup({
name: createFormControl('', {
id: 'name',
required: true,
}),
email: createFormControl('', {
required: true,
id: 'email',
validators: (value: string) => {
if (!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(value)) {
return { invalid: 'Por favor introduza um email válido!' };
}
return null;
},
}),
phone: createFormControl('', {
id: 'phone',
validators: (value: number | undefined) => {
if (!!value && !/\d{9}/.test(String(value))) {
return { invalid: 'Por favor introduza um contacto válido.' };
}
return null;
},
}),
message: createFormControl('', {
id: 'message',
}),
acceptance: createFormControl(false, {
id: 'false',
required: true,
validators: (value) => {
if (!value.length) {
return {
isMissing:
'Por favor, marque o campo de aceitação para enviar a sua mensagem.',
};
}
return null;
},
}),
});
const group = createFormGroup({
name: createFormControl('', {
id: 'name',
required: true,
}),
email: createFormControl('', {
required: true,
id: 'email',
validators: (value: string) => {
if (!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(value)) {
return { invalid: 'Por favor introduza um email válido!' };
}
return null;
},
}),
phone: createFormControl('', {
id: 'phone',
validators: (value: number | undefined) => {
if (!!value && !/\d{9}/.test(String(value))) {
return { invalid: 'Por favor introduza um contacto válido.' };
}
return null;
},
}),
message: createFormControl('', {
id: 'message',
}),
acceptance: createFormControl(false, {
id: 'false',
required: true,
validators: (value) => {
if (!value.length) {
return {
isMissing:
'Por favor, marque o campo de aceitação para enviar a sua mensagem.',
};
}
return null;
},
}),
});