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

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

Last updated