Formlid-js

Formlid-js is Form helper package for Solid-JS with Yup as the validation schema

Installation

npm i formlid-js

If you encounter ReferenceError: React is not defined. Add the code below in the vite.config.ts

export default defineConfig({
  ...
  optimizeDeps:  {
    include:  [],
    exclude:  ['formlid-js'],
  }
});

Examples

try to check projects under examples/

APIs

createFormlid

create formlid store.

without context

  // formlid value type
  interface InitialValue {
    email: string;
    password: string;
    age?: number;
    checked: boolean[];
  }

  ...

  const { field, meta, form } = createFormlid<InitialValue>({
    initialValues: {
      email: '',
      password: '',
      checked: [],
    },
    validationSchema: {
      email: yup.string().required().email('enter a valid email'),
      password: yup.string().required().min(8, 'be at least 8 characters long'),
      checked: yup.array().of(yup.boolean().required()).required(),
    },
    onsubmit: async (data, helpers) => {
      await delya(1500); // wait for 1500ms
      alert(`submitted!\nemail: ${data.email}\npassword: ${data.password}`);
      console.log(helpers.getValues());
    },
  });

  ...


  return (
    <form {...form()}>
      <div>
        <label>e-mail</label>
        <input {...field('email')} autocomplete="off" />
      </div>
      <div>
        <label>password</label>
        <input type="password" {...field('password')} autocomplete="off" />
      </div>
      <button type="submit" disabled={form.isSubmitting()}>
        submit after 1500ms
      </button>
    </form>
  );

with context

// App.tsx

  // formlid value type
  interface InitialValue {
    email: string;
    password: string;
    age?: number;
    checked: boolean[];
  }

  ...

  const { form, FormlidProvider } = Formlid({
    initialValues: {
      email: '',
      password: '',
      checked: [],
    },
    validationSchema: {
      email: yup.string().required().email('enter a valid email'),
      password: yup.string().required().min(8, 'be at least 8 characters long'),
      checked: yup.array().of(yup.boolean().required()).required(),
    },
    onsubmit: async (data, helpers) => {
      await delya(1500); // wait for 1500ms
      alert(`submitted!\nemail: ${data.email}\npassword: ${data.password}`);
      console.log(helpers.getValues());
    },
  });

  ...

  return (
    <form {...form()}>
      <FormlidProvider>
        <!-- custom components -->
        <Field name="email" />
        <Field name="password" />
        <button type="submit" disabled={form.isSubmitting()}>
          submit
        </button>
      </FormlidProvider>
    </form>
  );

// Field.tsx

const Field = (props) => {
  const {field, meta, helpers} = useField(props.name);

  ...

  return (
    <div>
      <label>{props.name}</label>
      <input {...field()} value={`${field().value}`} />
    </div>
  );
}

createFormlid() arguments

arguments	Required	type	description
initialValues	Required	TFormValue;	initial value of form
validationSchema	Optional	{[key in string]: Yup.Schema}	yup validation schema
onsubmit	Required	(formData: TFormValue, helpers: FormlidSubmitHelpers<TFormValue>) => any | Promise<any>;	callback function when submit the form
validateOnSubmitOnly	Optional	boolean | Accessor<boolean>;	validate with validation schema when submit is emitted only

createFormlid() returns

field	type
form	FormlidFormHelpers
field	FormlidFieldHelpers
meta	FormlidMetaHelpers
helpers	FormlidHelpers
FormlidProvider	FormlidProviderComponent

useForm

It is a wrapper function of useContext. when you should call createFormlid() in a parent component of the component that has form element.

Thus, you should use call useForm() in a child component under the FormlidProvider.

It returns same object as createFormlid() without FormlidProvider.

  const { field } = useForm(); 

  return (
    <div>
      <label>{props.name}</label>
      <input {...field()} />
    </div>
  );

useForm() arguments

arguments	Required	type	description

useForm() returns

field	type
form	FormlidFormHelpers
field	FormlidFieldHelpers
meta	FormlidMetaHelpers
helpers	FormlidHelpers

useField

It is a wrapper function of useContext. when you should call createFormlid() in a parent component of the component that has form element.

Thus, you should use call useForm() in a child component under the FormlidProvider.

It returns same object as createFormlid() without FormlidProvider.

You do not need to forward the name When calling a function that previously required a name like field(), meta(), helpers.setValue(), etc.

  const { field } = useField('name'); 

  return (
    <div>
      <label>{props.name}</label>
      <input {...field()} />
    </div>
  );

useField() arguments

arguments	type	description
name	keyof TFormValue	One of the key of the initialValue.

useField() returns

field	type
form	UseFieldFormHelpers
field	UseFieldFieldHelpers
meta	UseFieldMetaHelpers
helpers	UseFieldHelpers

Types

TFormValue

It is type of value which a formlid store and manage. initialValues props of createFormlid() follows this type

  TFormValue: object

FormlidFormHelpers;

FormlidFieldHelpers;

FormlidMetaHelpers;

FormlidHelpers;

FormlidProviderComponent;

UseFieldFormHelpers

UseFieldFieldHelpers

UseFieldMetaHelpers

UseFieldHelpers

Todo

[ ] Write Types, Field in README.md

[ ] Write tests

[ ] Add reactive on initialValues & validationSchema to createFormlid props

[ ] refactor Signals to Store

Contributing

"Pull Requests are welcome."

For major changes, please open an issue first to discuss what you would like to change.

License

MIT