Nodding Previously Managed

    react-native-formly

    1.0.0 • Public • Published

    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
    
    import React, { Component }  from 'react';
    import {ScrollView } from 'react-native';
    import { Formly} from 'react-native-formly';
    require('react-native-formly-templates-md');
     
    class MaterialForm  extends Component {
        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: {
                            expression: function ({ viewValue, modelValue, param }) {
                                //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: new Date() },
                            { name: "object", value: { prop1: "value1" } }
                        ]
     
                    }
                }
            ]
        }
     
        state={ model: {} }
     
        _onFormlyUpdate = (model) =>{
            this.setState({ model: model });
        }
     
        _onFormlyValidityChange = (isValid) => {
            this.setState({ formIsValid: isValid });
        }
        
        render () {
            return (
                <ScrollView keyboardShouldPersistTaps="handled" style={{ flex: 1 }}>
                    <Formly config={this.formlyConfig} model={this.state.model} 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

    import React from 'react';
    import createReactClass from 'create-react-class';
    import { FieldMixin } from 'react-native-formly';
    import {
        View,
        Text,
        TextInput
    } from 'react-native';
     
    var FormlyTextInput = createReactClass({
        mixins: [FieldMixin],
        render: function () {
            let key = this.props.config.key;
            let to = this.props.config.templateOptions || {};
            let model = this.props.model[key];
            let viewValue = this.props.viewValues[key];
            var fieldValidationResult = this.props.fieldValidation || {};
            let validationMessages = fieldValidationResult.messages || {}
            return (
                <View style={{ flex: 1 }}>
                    <Text style={{fontWeight:"bold",color:"black"}}>{to.label}</Text>
                    <TextInput editable={!to.disabled} underlineColorAndroid={fieldValidationResult.isValid ? "green" : "red"} value={model || viewValue} placeholder={to.placeholder} onChangeText={this.onChange} />
                    <Text style={{ color: "red" }}>{Object.keys(validationMessages).length != 0 ? Object.values(validationMessages)[0] : null}</Text>
                </View>
            );
        }
    });
     
    module.exports = FormlyTextInput;

    Now you only need to register your component with Formly before using it.

    import {Formly, FormlyConfig} from 'react-native-formly';
    let {FieldsConfig} = FormlyConfig;
     
    FieldsConfig.addType([
      { name: 'textInput', component: require('./FormlyTextInput') }
    ]);

    Working on the rest of the documentation...

    Contribution

    Please check CONTRIBUTING.md.

    Credits

    Install

    npm i react-native-formly

    DownloadsWeekly Downloads

    8

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • assem-hafez