项目作者: anamanaguchi

项目描述 :
Simple angular2 app, that generates generates form components from json file.
高级语言: TypeScript
项目地址: git://github.com/anamanaguchi/ng2-builder.git
创建时间: 2016-11-28T21:17:18Z
项目社区:https://github.com/anamanaguchi/ng2-builder

开源协议:

下载


Ng2Builder

Simple Angular2 app which generates user form components from JSON file.

Demo

https://anamanaguchi.github.io/ng2-builder/

Quick start

  1. npm install
  2. npm install -g angular-cli
  3. ng build
  4. ng serve

Available components

SectionComponent

Component that wraps other components into one section element.

JSON example

  1. {
  2. "elementType": "SectionComponent",
  3. "attributes": {
  4. "name": "Sample section",
  5. "id": "sample-input-field",
  6. "label": "This is example of section component.",
  7. "wrapperClass": ["class1","class2"],
  8. "class": ["section-class"],
  9. "elements": [{}]
  10. }
  11. }
TextContentComponent

Component that display text block with title.

JSON example

  1. {
  2. "elementType": "TextContentComponent",
  3. "attributes": {
  4. "title": "Hello world from text content component!",
  5. "content": "Vestibulum ante ipsum primis in faucibus orci luctus et.",
  6. "class": ["sample-class"]
  7. }
  8. }
InputComponent

Form text input component.

JSON example

  1. {
  2. "elementType": "InputComponent",
  3. "attributes": {
  4. "name": "sample-input",
  5. "id": "sample-input",
  6. "placeholder": "Inputs placeholder",
  7. "label": "Elements label*",
  8. "class": ["sample-class"],
  9. "wrapperClass": ["wrapper-class1"],
  10. "labelClass": ["label-class1"],
  11. "validation": {
  12. "required": {
  13. "value": true,
  14. "error": "This field is required!"
  15. }
  16. }
  17. }
  18. }
TextareaComponent

Form textarea component.

JSON example

  1. {
  2. "elementType": "TextareaComponent",
  3. "attributes": {
  4. "rows": 2,
  5. "name": "sample-name",
  6. "id": "sample-id",
  7. "defaultValue": "",
  8. "placeholder": "Elements placeholder",
  9. "label": "Elements label*",
  10. "class": ["sample-class"],
  11. "wrapperClass": ["sample-wrapper-class"],
  12. "labelClass": ["sample-label-class"],
  13. "validation": {
  14. "required": {
  15. "value": true,
  16. "error": "This field is required!"
  17. }
  18. }
  19. }
  20. }
RadioComponent

Form radio component.

JSON example

  1. {
  2. "elementType": "RadioComponent",
  3. "attributes": {
  4. "name": "Sex",
  5. "id": "sex",
  6. "wrapperClass": [
  7. "mdl-grid"
  8. ],
  9. "options": [
  10. {
  11. "value": "male",
  12. "label": "Male",
  13. "class": ["mdl-radio__button"],
  14. "labelClass": ["mdl-radio__label"],
  15. "wrapperClass": ["mdl-radio","mdl-js-radio"]
  16. },
  17. {
  18. "value": "female",
  19. "label": "Female",
  20. "class": ["mdl-radio__button"],
  21. "labelClass": ["mdl-radio__label"],
  22. "wrapperClass": ["mdl-radio","mdl-js-radio"],
  23. "checked": true
  24. }
  25. ]
  26. }
  27. }
CheckboxComponent

Form checkbox component.

JSON example

  1. {
  2. "elementType": "CheckboxComponent",
  3. "attributes": {
  4. "name": "terms",
  5. "id": "terms",
  6. "checked": false,
  7. "label": "Accept terms and conditions*",
  8. "class": ["mdl-checkbox__input"],
  9. "wrapperClass": ["mdl-cell","mdl-checkbox","mdl-js-checkbox","mdl-cell--12-col"],
  10. "labelClass": ["mdl-checkbox__label"],
  11. "validation": {
  12. "required": {
  13. "value": true,
  14. "error": "This field is required!"
  15. }
  16. }
  17. }
  18. }
SelectComponent

Form select component.

JSON example

  1. {
  2. "elementType": "SelectComponent",
  3. "attributes": {
  4. "name": "gender",
  5. "id": "gender",
  6. "label": "Please, choose an option*",
  7. "options": [
  8. {
  9. "value": "option1",
  10. "label": "Option 1"
  11. },
  12. {
  13. "value": "option2",
  14. "label": "Option 2",
  15. "selected": true
  16. }
  17. ],
  18. "wrapperClass": ["mdl-selectfield","mdl-js-selectfield","mdl-selectfield--floating-label","mdl-cell","mdl-cell--12-col"],
  19. "labelClass": ["mdl-selectfield__label"],
  20. "class": ["mdl-selectfield__select"],
  21. "validation": {
  22. "required": {
  23. "value": true,
  24. "error": "This field is required!"
  25. }
  26. }
  27. }
  28. }
ButtonComponent

Form button component.

JSON example

  1. {
  2. "elementType": "ButtonComponent",
  3. "attributes": {
  4. "type": "submit",
  5. "disabled": false,
  6. "label": "Submit form",
  7. "class": ["mdl-button","mdl-js-button","mdl-button--raised","mdl-js-ripple-effect","mdl-button--accent","mdl-cell","mdl-cell--12-col"]
  8. }
  9. }