form

form interfaces

Type	Description
	L.form is a function that allows performing actions upon
(formName: string, fieldNames?: string \| string[]) => FormFieldsHelpers	- a form - form components
(formName: string, fieldName: string) => FormFieldHelpers	- a single form component depending on the parameters you pass
	L.form() returns a collection of methods
interface FormFieldHelpers { get: () => FormGetField \| undefined, remove: () => void, reset: () => boolean, validate: (warpedValidator?: ExternalValidator \| ExternalValidator[]) => Field \| undefined, } interface FormFieldsHelpers { get: () => FormGetField[], remove: () => void, reset: () => boolean, validate: () => Field[], }	get returns component/form data remove deletes a component or a whole form so they are not avaliable anymore and their data get lost reset resets components to their empty/default state validate triggers validation, no need to submit the form
interface FormGetField { isFilled: boolean, isRequired: boolean, isValid: boolean, name: string, value: any, } interface Field { invalidMessages?: string[], isRequired: boolean, isValid: boolean, name: string, requiredMessage?: string, reset: () => void, setIsValid: SetState<boolean>, setMessages: SetState<string[] \| undefined>, shouldValidateUnmounted: boolean, validators: NormalizedValidatorObject[], value: any, } interface ExternalValidator { validator: Validator \| Validator[], invalidMessage?: string, }	Some more interfaces

Single form field manipulations


() => {
  return (
    <>
      <L.Input
        form='test-form-1'
        name='test-form-input-1'
        _w-48
        _mb-4
      />

      <L.Input
        form='test-form-1'
        name='test-form-input-2'
        _w-48
        _mb-4
      />

      <L.Input
        form='test-form-1'
        name='test-form-input-3'
        _w-48
        _mb-4
      />

      <L.CheckBox
        form='test-form-1'
        name='test-check-box'
        defaultValue={true}
        _w-48
        _mb-4
      >
        CheckBox
      </L.CheckBox>

      <L.Button
        form='test-form-1'
        onClick={({ form }) => console.log(form)}
      >
        Submit 
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').get())}
        _ml-4
      >
        get
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').validate())}
        _ml-4
      >
        validate
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').reset())}
        _ml-4
      >
        reset input
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-1', 'test-check-box').reset())}
        _ml-4
      >
        reset check box
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-1').reset())}
        _ml-4
      >
        reset form
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-1', 'test-form-input-1').remove())}
        _ml-4
      >
        remove
      </L.Button>
    </>
  );
}

Multiple form fields manipulations


() => {
  return (
    <>
      <L.Input
        form='test-form-2'
        name='test-form-input-1'
        _w-48
        _mb-4
      />

      <L.Input
        form='test-form-2'
        name='test-form-input-2'
        _w-48
        _mb-4
      />

      <L.Input
        form='test-form-2'
        name='test-form-input-3'
        _w-48
        _mb-4
      />

      <L.Button
        form='test-form-2'
        onClick={({ form }) => console.log(form)}
      >
        Submit 
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).get())}
        _ml-4
      >
        get
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).validate())}
        _ml-4
      >
        validate
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).reset())}
        _ml-4
      >
        reset
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-2', ['test-form-input-1', 'test-form-input-2']).remove())}
        _ml-4
      >
        remove
      </L.Button>
    </>
  );
}

Whole form manipulations


() => {
  return (
    <>
      <L.Input
        form='test-form-3'
        name='test-form-input-1'
        _w-48
        _mb-4
      />

      <L.Input
        form='test-form-3'
        name='test-form-input-2'
        _w-48
        _mb-4
      />

      <L.Input
        form='test-form-3'
        name='test-form-input-3'
        _w-48
        _mb-4
      />

      <L.Button
        form='test-form-3'
        onClick={({ form }) => console.log(form)}
      >
        Submit 
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-3').get())}
        _ml-4
      >
        get
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-3').validate())}
        _ml-4
      >
        validate
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-3').reset())}
        _ml-4
      >
        reset
      </L.Button>

      <L.Button
        onClick={() => console.log(L.form('test-form-3').remove())}
        _ml-4
      >
        remove
      </L.Button>
    </>
  );
}