Forms

Forms are based on 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)

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)

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

• Select