Form

Form Component

Form is a controlled component that handles field validation and other handy features.

Email Address

Password

<Form>
  {form => (
    <View>
      <InputWithValidation
        autoCapitalize="none"
        autoCorrect={false}
        blurOnSubmit={false}
        form={form}
        isRequired
        label="Email Address"
        name="email"
        returnKeyType="next"
        defaultValue={'Mark'}
        textContentType="emailAddress"
        validationMethods={[FormValidationRules.isEmail]}
        isFocused
      />
      <InputWithValidation
        autoCapitalize="none"
        form={form}
        isRequired
        label="Password"
        name="password"
        returnKeyType="go"
        secureTextEntry={true}
        defaultValue={'Kuzen'}
        textContentType="password"
        validationMethods={[FormValidationRules.minLength(6)]}
        isFocused
      />
    </View>
  )}
</Form>

<Form>
  {form => (
    <View>
      <InputWithValidation
        autoCapitalize="none"
        autoCorrect={false}
        blurOnSubmit={false}
        form={form}
        isRequired
        label="Email Address"
        name="email"
        returnKeyType="next"
        defaultValue={'Mark'}
        textContentType="emailAddress"
        validationMethods={[FormValidationRules.isEmail]}
        isFocused
      />
      <InputWithValidation
        autoCapitalize="none"
        form={form}
        isRequired
        label="Password"
        name="password"
        returnKeyType="go"
        secureTextEntry={true}
        defaultValue={'Kuzen'}
        textContentType="password"
        validationMethods={[FormValidationRules.minLength(6)]}
        isFocused
      />
    </View>
  )}
</Form>

<Form>
  {form => (
    <>
      <InputWithValidation
        form={form}
        isRequired
        label="Email Address"
        name="email"
      />
    </>
  )}
</Form>

Props

Form render prop

The render prop that the Form component gives you, provides the following object.

{
  "errors": { // An object with all of the form's errors
    "email": [],
  },
  "onBlur": Function,
  "onChange": Function,
  "onSubmit": Function,
  "state": "indeterminate", // Could be `invalid`, `valid` or`indeterminate`
  "touched": {},
  "values": {
    "email": undefined, // An object with all of the input's values
  },
  "isValid": false,
}

FormValidationRules

An object that contains some premade validaiton rules you can use with InputWithValidation.

import { FormValidationRules } from "reckon-mobile-design-system";

Available methods include...

exactLength,
hasOnlyNumbers,
isAustralianMobilePhone,
isDate,
isEmail,
isNumber,
isPhone,
isRequired,
maxAmount,
minAmount,
maxLength,
minLength