React-native-formly
Build your forms easily by adding custom components, validations, error messages. This is a react-native implementation for Angular Formly.
Table of contents
- Installation
- Usage
- Basic usage
- Create custom components
- Contribution
- Credits
Installation
npm install react-native-formly --save
Usage
Basic Usage
First you need to install our ready made template for material components. Then you can start building your awesome forms easily.
npm install react-native-formly-templates-md --save
;;;; formlyConfig = fields: // add your form fields here //Basic component key: 'firstInput' type: 'input' //material text input templateOptions: label: "Label" placeholder: "Placeholder" required: true description: "Description" //component that hides on some condition key: 'secondInput' type: 'input' templateOptions: placeholder: "Enter a number between 3 & 10 digits" label: "Number Input" type: "number" minlength: 3 maxlength: 10 hideExpression: "model.fourthInput==='hide'" //this hides the input when the fourth input value equals 'hide' //component that controls its templateOptions using expressionProperties key: 'thirdInput' type: 'input' templateOptions: label: "Dynamic Label" description: "Enter Value to change the label" expressionProperties: "templateOptions.disabled": "model.fourthInput==='disable'" //this disables the input when the fourth input value equals 'disable' "templateOptions.label": "viewValue || 'Dynamic Label'" //this changes the input when the label depending on the value //components with custom validator key: 'fourthInput' type: 'input' templateOptions: label: "Custom Validation Input" description: "Enter `hide` or `disable`" validators: customValueValidator: { //empty value or hide or disable return !viewValue || viewValue == 'hide' || viewValue == 'disable'; } message: "'Should equal to `hide` or `disable`'" key: 'radioInput' type: 'radio' templateOptions: label: "Radio Input" required: true description: "Each radio button have value of different type" options: "string" 2 name: "array" value: 1 2 3 name: "date" value: name: "object" value: prop1: "value1" state= model: {} { this; } { this; } { return <ScrollView keyboardShouldPersistTaps="handled" style= flex: 1 > <Formly config=thisformlyConfig model=thisstatemodel onFormlyUpdate=this_onFormlyUpdate onFormlyValidityChange=this_onFormlyValidityChange /> </ScrollView> ; }
Create custom components
First you need to create react component and add FieldMixin
to its mixins
. The FieldMixin
adds onChange
function which you should call when the components value change. Formly will automaticaly inject to your component the following props: config, model, viewValues and fieldValidation.
FormlyTextInput.js
;;;; var FormlyTextInput = ; moduleexports = FormlyTextInput;
Now you only need to register your component with Formly
before using it.
;let FieldsConfig = FormlyConfig; FieldsConfig;
Working on the rest of the documentation...
Contribution
Please check CONTRIBUTING.md
.
Credits
- Author - Assem Hafez
- This library was built at Codelabsys
- Special thanks for Mohamed Abbas for helping out testing the library.