Form Container
Form container is a lightweight React form container with validation (written in TypeScript). It allows you to use both HTML5 form validation and custom validation functions.
built with ❤️ at Appfocused
TL;DR
It provides your child form with 2 objects of props:
form
- all data on your form values, states, errors and warningsformMethods
- methods to bind your input controllers and manipulate the form model
Demos:
- Material UI login form
form-container
withmaterial-ui
controls
Installation
Form Container is available as the form-container
package on npm.
Install it in your project with npm
or yarn
npm install form-container
or
yarn add form-container
Getting started
connectForm([validators], [formConfig])(WrappedComponent)
form-container
exposes connectForm
function to connect an arbitrary form component (WrappedComponent
).
It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.
Arguments
-
[
validators: ValidationRule[]
] (Array): An array of rules can be provided to validate the form model against them. Rules are executed in a sequence that is defined in the array. -
[
formConfig: IFormConfig
] (Object): An object contains initial configuration for the forminitialModel: Partial<T>
— object provides initial values to the form fieldsmiddleware: (props: T) => T & M
— function transforms props passed to the wrapped componentonInputBlur: (e: React.ForcusEvent<any>) => void
— function is called on every blur on an input field within the form. Adding a customonBlur
to the input field itself is not recommended, use this method instead
Validation
HTML5 validation example
; // bare minimum import; // IFormProps interface contains the props that are passed down from form-containerinterface IProps extends IFormProps {} Component<IProps {}> { e; const model = thispropsform; console; } { const validationErrors touched = thispropsform; const bindInput bindNativeInput = thispropsformMethods; return <form onSubmit=thishandleSubmit> <div> <label> Required field <input /* HTML attribute to validate required field */ required=true /* this is how you bind input to a form-container */ ... /> <small>touchedtest && validationErrorstest</small> </label> </div> <div> <button type="submit">Submit</button> </div> </form> ; } // no custom validatorsconst validators: any = ; const formConfig = initialModel: test: 'foo' // attaching our Form to form-container with validationvalidators formConfigForm;
Custom validation example
// components/Form.tsx;; interface IProps extends IFormProps {} // arbitrary form componentPureComponent<IProps {}> { const validationErrors touched = thispropsform; const bindInput = thispropsformMethods; return <form> <div> <label> Test: <input /* this is how you bind input to a form-container */ ... /> <small>touchedtest && validationErrorstest</small> </label> </div> </form> ; } // custom validatorconst hasMoreThan6Chars: Condition = value ? valuelength > 6 : true;const strongPassword = ; // all validators for the formconst validators = ; // attaching our Form to form-container with validationvalidatorsForm;
Submit validation example
Form Container exposes SubmissionError
, a throwable error which can be used to set submit validation for fields in response to promise rejection because of validation errors.
A wrapped form component has access to handleSubmit
via formMethods
:
handleSubmit([submit])
Arguments
Inside the provided submit
function you can throw a SubmissionError
which will be caught by handleSubmit
, and the submission errors will be set for each key in the form state under a key submitErrors
, e.g.:
throw test: "Don't like this...";
// components/Form.tsx;; interface IProps extends IFormProps {} interface IFormModel test: string; // arbitrary form componentPureComponent<IProps {}> { return // your Promise based HTTP client of choice ; }; { const validationErrors submitErrors touched = thispropsform; const bindInput handleSubmit = thispropsformMethods; return <form> <div> <label> Test: <input ... /> <small> touchedtest && validationErrorstest || submitErrorstest </small> </label> </div> <button onClick= /> </form> ; } <IFormModel>Form;