0.2.4 • Published 6 years ago
react-native-formly-templates-md v0.2.4
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
- 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