Simple angular2 app, that generates generates form components from json file.
Simple Angular2 app which generates user form components from JSON file.
https://anamanaguchi.github.io/ng2-builder/
npm install
npm install -g angular-cli
ng build
ng serve
Component that wraps other components into one section element.
JSON example
{
"elementType": "SectionComponent",
"attributes": {
"name": "Sample section",
"id": "sample-input-field",
"label": "This is example of section component.",
"wrapperClass": ["class1","class2"],
"class": ["section-class"],
"elements": [{}]
}
}
Component that display text block with title.
JSON example
{
"elementType": "TextContentComponent",
"attributes": {
"title": "Hello world from text content component!",
"content": "Vestibulum ante ipsum primis in faucibus orci luctus et.",
"class": ["sample-class"]
}
}
Form text input component.
JSON example
{
"elementType": "InputComponent",
"attributes": {
"name": "sample-input",
"id": "sample-input",
"placeholder": "Inputs placeholder",
"label": "Elements label*",
"class": ["sample-class"],
"wrapperClass": ["wrapper-class1"],
"labelClass": ["label-class1"],
"validation": {
"required": {
"value": true,
"error": "This field is required!"
}
}
}
}
Form textarea component.
JSON example
{
"elementType": "TextareaComponent",
"attributes": {
"rows": 2,
"name": "sample-name",
"id": "sample-id",
"defaultValue": "",
"placeholder": "Elements placeholder",
"label": "Elements label*",
"class": ["sample-class"],
"wrapperClass": ["sample-wrapper-class"],
"labelClass": ["sample-label-class"],
"validation": {
"required": {
"value": true,
"error": "This field is required!"
}
}
}
}
Form radio component.
JSON example
{
"elementType": "RadioComponent",
"attributes": {
"name": "Sex",
"id": "sex",
"wrapperClass": [
"mdl-grid"
],
"options": [
{
"value": "male",
"label": "Male",
"class": ["mdl-radio__button"],
"labelClass": ["mdl-radio__label"],
"wrapperClass": ["mdl-radio","mdl-js-radio"]
},
{
"value": "female",
"label": "Female",
"class": ["mdl-radio__button"],
"labelClass": ["mdl-radio__label"],
"wrapperClass": ["mdl-radio","mdl-js-radio"],
"checked": true
}
]
}
}
Form checkbox component.
JSON example
{
"elementType": "CheckboxComponent",
"attributes": {
"name": "terms",
"id": "terms",
"checked": false,
"label": "Accept terms and conditions*",
"class": ["mdl-checkbox__input"],
"wrapperClass": ["mdl-cell","mdl-checkbox","mdl-js-checkbox","mdl-cell--12-col"],
"labelClass": ["mdl-checkbox__label"],
"validation": {
"required": {
"value": true,
"error": "This field is required!"
}
}
}
}
Form select component.
JSON example
{
"elementType": "SelectComponent",
"attributes": {
"name": "gender",
"id": "gender",
"label": "Please, choose an option*",
"options": [
{
"value": "option1",
"label": "Option 1"
},
{
"value": "option2",
"label": "Option 2",
"selected": true
}
],
"wrapperClass": ["mdl-selectfield","mdl-js-selectfield","mdl-selectfield--floating-label","mdl-cell","mdl-cell--12-col"],
"labelClass": ["mdl-selectfield__label"],
"class": ["mdl-selectfield__select"],
"validation": {
"required": {
"value": true,
"error": "This field is required!"
}
}
}
}
Form button component.
JSON example
{
"elementType": "ButtonComponent",
"attributes": {
"type": "submit",
"disabled": false,
"label": "Submit form",
"class": ["mdl-button","mdl-js-button","mdl-button--raised","mdl-js-ripple-effect","mdl-button--accent","mdl-cell","mdl-cell--12-col"]
}
}