ws-form-builder

Ionic 2 Form Builder

Usage no npm install needed!

<script type="module">
  import wsFormBuilder from 'https://cdn.skypack.dev/ws-form-builder';
</script>

README

WaffleSamurai Form Builder for Ionic 2

todo:

  • sort profile image upload/image select
  • add password field with compare validation
  • ensure skipable step only works when all fields are not required.
  • auto tab doesnt work on pincode. fix in place for mobile. waiting to compile
  • replace datepicker with native (keep other version for desktop)
  • sort dependancy list
  • wrap up in custom plugin (install using npm)
  • write docs.

sample config:

    'showProgressBar':true,
    'nextButtonText':'Continue',
    'showPreviousButton':true,
    'formCallback':'formCallback',
    'steps':[
        {
            'stepTitle':'Step 1',
            'questions':[
                {
                    'type':'text',
                    'field':'fname',
                    'question':'First Name',
                    'value':'',
                    'minLength':1,
                    'maxLength':69,
                    'required':true,
                    'placeholder':'Name',
                    'valid':false,
                    'validators':{
                        //'validators':['numbersOnly'],
                        //'customRegex':/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                    }
                },
                {
                    'type':'text',
                    'field':'lname',
                    'question':'Last Name',
                    'value':'',
                    'minLength':1,
                    'maxLength':60,
                    'required':true,
                    'placeholder':'Name',
                    'valid':false,
                    'validators':{
                        //'validators':['numbersOnly'],
                        //'customRegex':/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                    }
                },
                {
                    'type':'email',
                    'field':'email',
                    'question':'Please provide your email address.',
                    'value':'',
                    'required':true,
                    'placeholder':'Email address',
                    'valid':false,
                    'validators':{
                        'validators':['email'],
                        //'customRegex':/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                    }
                }
            ]
        },

        {
            'stepTitle':'Step 2',
            'questions':[
                {
                    'type':'radio',
                    'field':'favorite_language',
                    'question':'What\'s favorite coding language?',
                    'value':'',
                    'required':true,
                    'valid':false,
                    'options':[
                        {
                            'value':'html',
                            'label':'HTML'
                        },
                        {
                            'value':'PHP',
                            'label':'PHP'
                        },
                        {
                            'value':'js',
                            'label':'Javascript'
                        }
                    ]
                },
                {
                    'type':'select',
                    'field':'favorite_game',
                    'question':'Please provide your email address.',
                    'value':'',
                    'required':true,
                    'valid':false,
                    'addBlankOption':true,
                    'blankOptionText':'Please select',
                    'blankOptionValue':''
                }
            ]
        }
    ]
};```