# Forms

Forms are based on [react-final-form](https://github.com/final-form/react-final-form) so you might consider reading the modules documentation too when needing more detail.

## Code sample

The solution consist of:

* form hoc
* validate function
* Input components (Textfield, Select)

```jsx
import { View } from 'react-native';
import { Button } from '@dormakaba/digital-reactnative-visual';
import React, { Component } from 'react';
import { form, validate, Textfield } from '@dormakaba/digital-reactnative-client';

export class UsingForm extends Component {
  render() {
    const { handleSubmit } = this.props;

    return (
      <View>
        <Textfield label="firstname" name="firstname" />

        <Button primary onPress={handleSubmit}>
          send
        </Button>
      </View>
    );
  }
}

export default form({
  validate: validate({
    firstname: 'required',
  }),
  onSubmit: values => {
    console.warn(values);
  },
})(UsingForm);
```

## form (HOC)

```javascript
form(formOptions, YourFormComponent);
```

### formOptions

| name          | description                                                                                                 |
| ------------- | ----------------------------------------------------------------------------------------------------------- |
| validate      | function taking current values returning an object containing all errors use the provided validate function |
| onSubmit      | function that get called with values submitted                                                              |
| initialValues | initial values to set form fields to                                                                        |
| ...           | all of <https://github.com/final-form/react-final-form#formprops>                                           |

The options can also be passed to the react-final-form via props.

### Props passed to YourFormComponent

| name          | description                                                              |
| ------------- | ------------------------------------------------------------------------ |
| prestine      | has changes?                                                             |
| handleCancel  | function to call to cancel form editing                                  |
| handleSubmit  | function to call to submit changes                                       |
| disableSubmit | same value as prestine -> avoid submit of form when there are no changes |
| ...           | all other props are passed through                                       |

## Form components

### Props

| Name | Description                                                                                                   |
| ---- | ------------------------------------------------------------------------------------------------------------- |
| name | given name for that field (used in values passed to onSubmit and validate)                                    |
| ...  | Props allowed for the visual component and all of <https://github.com/final-form/react-final-form#fieldprops> |

### Available components

* [Textfield](https://dormakaba-digital.gitbook.io/reactnative-visual/components/textfield)
* [Select](https://dormakaba-digital.gitbook.io/reactnative-visual/components/select)