ws-form-builder
Version:
Ionic 2 Form Builder
114 lines (105 loc) • 2.9 kB
Markdown
# 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: ####
```formConfig:object = {
'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':''
}
]
}
]
};```