react-native-formly-templates-md

React-native-formly: Material Template

Getting Started

Prerequisites

This is a material template for react-native-formly. So make sure that it is installed first.

Installing

npm install react-native-formly-templates-md --save

Components

input

templateOptions Configuration:

name	description	type	default
label	Input Label	string	-
placeholder	Input placeholder	string	-
description	Input description	string	-
required	Input should have a value	bool	-
disabled	Input is disabled	bool	-
minlength	Minimum character length to be entered	number	-
maxlength	Maximum character length to be entered	number	-
type	Input text type	string of (text, number, url, email, password)	'text'
pattern	The property that contains radio value	string regex	-

Example:

{
    key: 'myMaterialInput',
    type: 'input',
    templateOptions: {
        label: "Number Input",
        placeholder:"Write a number here",
        required:true,
            minlength: 3,
            type:"number"
    }
}

textarea

templateOptions Configuration:

name	description	type	default
label	Input Label	string	-
placeholder	Input placeholder	string	-
description	Input description	string	-
required	Input should have a value	bool	-
disabled	Input is disabled	bool	-
minlength	Minimum character length to be entered	number	-
maxlength	Maximum character length to be entered	number	-
type	Input text type	string of (text, number, url, email)	'text'
pattern	The property that contains radio value	string regex	-

Example:

{
    key: 'myMaterialTextarea',
    type: 'textarea',
    templateOptions: {
        label: "Textarea",
        placeholder:"Say something here",
        required:true,
        maxlength: 200
    }
}
    

select

name	description	type	default
label	Radio group Label	string	-
description	Radio group description	string	-
required	Radio group should have a value	bool	-
disabled	Radio group is disabled	bool	-
minlength	Minimum character length to be entered	number	-
maxlength	Maximum character length to be entered	number	-
options	Array of select options to be rendered	array	[]
labelProp	The property that contains radio label if option is object	string	'name'
valueProp	The property that contains radio value if option is object	string	'value'
pattern	The property that contains radio value	string regex	-

Example:

{
    key: 'myMaterialSelect',
    type: 'select',
    templateOptions: {
        label: 'Select',
        required: true,
        description : 'Select your type',
        options:[
            'string',
            2,
            {name:'label', value:'value'}
            ]
    }
}

radio

name	description	type	default
label	Radio group Label	string	-
description	Radio group description	string	-
required	Radio group should have a value	bool	-
disabled	Radio group is disabled	bool	-
minlength	Minimum character length to be entered	number	-
maxlength	Maximum character length to be entered	number	-
options	Array of radio buttons to be rendered	array	[]
labelProp	The property that contains radio label if option is object	string	'name'
valueProp	The property that contains radio value if option is object	string	'value'
pattern	The property that contains radio value	string regex	-

Example:

{
    key: 'myMaterialRadio',
    type: 'radio',
    templateOptions: {
        label: 'Radio Input',
        required:true,
        description : 'Select your type',
        options:[
            "string",
            2,
            {name:'array', value:[1,2,3]},
            {name:'date', value: new Date()},
            {name:'object', value:{prop1:'value1'}}
            ]
    }
}

Configuring Validation

Available validations are:

• required
• url
• email
• number
• pattern
• minlength
• maxlength

Customize validation message

You can customize any of the previous validations messages by adding a message to formly's MessagesConfig.

import { Formly, FormlyConfig } from 'react-native-formly';
let {MessagesConfig } = FormlyConfig;
 
MessagesConfig.addType([
  {
    name: 'required',
    message: "'This field is Required!!!'"
  },
  {
    name: 'number',
    message: "viewValue+' is not a number'"
  }
]);

Overriding validations

If you ever wanted to change a validation you can override it using formly's ValidationsConfig.

import { Formly, FormlyConfig } from 'react-native-formly';
let {ValidationsConfig} = FormlyConfig;
 
ValidationsConfig.addType({
 minlength: {
    expression: function ({ viewValue, modelValue, param }) {
      return viewValue && viewValue.length >= param;
    },
    message:"'Minimum length is '+ param"
  }
});

Make sure that you add this validations after requiring the template

Roadmap

• input
• radio
• textarea
• checkbox
• multicheckbox
• customizable themes
• select