\<Form/>

import {Form, Input} from "frig"
<Form data={this.state.myAccount} onChange={(myAccount) => this.setState({myAccount})}>
  <Input name="example">
</Form>

Props

• data (required) - This is used to populate the values (including default values) of each field in the form. The data property is also used by inputs for type inference where a type property is not provided.
• onChange(data) (required) - the onChange callback will be updated whenever there is user input. The onChange function receives the full updated data of the form as it's only argument. Normally this is used to update your store or setState and trigger a re-render passing the new data back in to the form.
• errors (optional) - an array of strings. The list of errors supplied here can be rendered by the <FormErrorList/> component.
• onSubmit (optional) - a function. Called after the submit button is clicked and all validations have passed. The DOM event is passed to the callback.
• layout (optional) - a string. Either "horizontal" for a horizontally layed out form (with labels on the same row as their inputs) or "vertical" for a vertically layed out form (with labels above their inputs). Defaults to "vertical".
• align (optional) - a string. Either "left" to align all inputs along the left side of their containing divs or "right" to align all inputs on the right side of their containing divs. Defaults to "left".

Public Functions

These functions can be called on the frig form object (eg. using React refs).

• validate() - validates the form's inputs and renders all errors.
• isValid() - returns true if all of the form's inputs are in a valid state. Does not visibly render errors.
• isModified() - returns true if any of the form's inputs have been modified by the user (in other words props.data changes do not count).
• modifications() - returns an object of modifications by the user to the form's fields and nested fields. The modifications are keyed by the input and nested fieldset names. The value for each inputs is true and the value for each nested fieldset is a nested object.
• resetModified() - resets the value of isModified() to false.
• reset() - resets the value of isModified() to false and resets all validations (eg. hiding required feild error messages).
• formData() - returns the HTML5 FormData object. See https://developer.mozilla.org/en/docs/Web/API/FormData

\<Input/>

import {Form, Input} from "frig"
<Form data={this.state.myAccount} onChange={(myAccount) => this.setState({myAccount})}>
  <Input name="example">
</Form>

Frig Inputs are your interface to any kind of form element that allow the user to edit their data.

For example <Input name="username"/> will render a HTML input element by default however <Input name="friends" options=["Jane", "Joe"]/> will render a select.

An input receives a name and loads its value from the form's data (ie. value = form.props.data[input.props.name]). To specificy a type of form element to render you can either set its props.type or props.component or leave both blank and have the input guess its type based on the form data and its name (see Type Inference).

Props

• name (required) - a string. The key of the input's value in the form's props.data
• type (optional) - a string. The type of input. If a type is not provided it will be guessed based on the input's name and value (based on the form's data). the <Input/> is basically a wrapper for specific "themed inputs" (just normal react components defined by the Frig theme). See the Available Input Types section for a complete list of type values.
• component (optional) - a React Component. Overrides the themed input specified by the type with a specific React Component to provide the user interface implementation of the input.
• errors (optional) - an array of strings. These errors are appended to the errors generated by the input's validations.
• options (optional) - Sets the options for a select or typeahead type input. An array of one of the following:
  • {value: OBJECT, label: STRING}
  • [LABEL_STRING, VALUE_OBJECT]
  • STRING
• className (optional) - string. Custom class names for the input.
• disabled (optional) - boolean (default: false). If set to true will disable user input.
• multiple (optional) - boolean (default: false). If set to true will enable mutiple-selection (eg. for a select form election).
• validate (optional) - boolean (default: true). If set to false will prevent validations from running on this input.

In addition some input types can have additional props specified. Please read the frigging_bootstrap source code for details.

Available Input Types and their Themed Input Components

Each type identifies a React Component in the theme (eg. FriggingBootstrap) to use inside of the input as the user interface to that particular input. We call these component Themed Input Components to distinguish them from the Frig Input Component.

Type	Component
"string"	input[type=text]
"password"	input[type=password]
"email"	input[type=email]
"url"	input[type=url]
"tel"	input[type=tel]
"boolean"	input[type=checkbox]
"text"	text
"file"	file[type=file]
"float"	input[type=number]
"switch"	switch
"time"	timepicker
"select"	select
"typeahead"	typeahead

Type Inference

If a type isn't specified then the input's type will be guessed based on the form data and its name according to the following rules:

1. If multiple or options is specified then the type will default to a select
2. If form.props[input.props.name] is an array then the type will default to a select
3. If the name ends in "password" then the type will default to a password
4. Otherwise the type is based on the typeof of the form.props[input.props.name]

\<Submit/>

import {Form, Submit} from "frig"
<Form data={this.state.myAccount} onChange={(myAccount) => this.setState({myAccount})}>
  <Submit title="Login"/>
</Form>

Props

• title (optional) - a string. The text of the submit button.

<\FormErrorList/>

import {Form, FormErrorList} from "frig"
<Form data={this.state.myAccount} onChange={(myAccount) => this.setState({myAccount})}>
  <FormErrorList/>
</Form>

The errorList component renders all the form-level errors in the form's props.errors.

Props

• name (optional) - a string. The field in props.errors to look up form-level errors. Defaults to "base" for compatibility with Active Record.

\<Fieldset/>

import {Form, Fieldset, Input} from "frig"
<Form data={this.state.myAccount} onChange={(myAccount) => this.setState({myAccount})}>
  <Fieldset name="children">
    <Input name="firstName"/>
    <Input name="lastName"/>
    <Input name="age"/>
  </Fieldset>
</Form>

A Fieldset takes a name (some key in the form's data) and produces one or more recursive (ie. nested) forms. Fieldsets accomidate both "has one" (nested objects) and "has many" (nested arrays of objects) relationships in form data.

Calling validate/isValid/isModified on a parent form object will call it on all of it's nested fields and incorporate their values recursively.

Props

• name (required) - The key of the fieldset's data object (or array of data objects) in the <Form/>'s props.data

\<FieldsetText/>

import {Form, Fieldset, FieldsetText, Input} from "frig"
<Form data={this.state.myAccount} onChange={(myAccount) => this.setState({myAccount})}>
  <Fieldset name="children">
    <h2>
      <FieldsetText text={(index) => `Child Number ${index}`}/>
    </h2>
    <Input name="firstName"/>
    <Input name="lastName"/>
    <Input name="age"/>
  </Fieldset>
</Form>

FieldsetText gives access to the index number of a fieldset for creating text that is dynamic across each child in a has many type fieldset - ie. fieldsets that are iterated over arrays of data.

Props

• text (required) - A function. First argument is the index number. Return a string to be injected into the DOM.