public/assets/plugins/angular-material-form-builder/README.md

   1 # Angular Material Form Builder!
   2
   3 Now supporting Angular >= 1.8.2!
   4
   5 This module enables you to easily build forms, just the way you do it in Google forms.
   6 The Module has two directives, one to create the form and the second to preview it:
   7 ![example1](http://i.imgur.com/i4e6KWQ.png)
   8
   9 ---
  10
  11 ## DEMO
  12
  13 Run `npm start`
  14
  15 It should open the browser on http://127.0.0.1:8080
  16
  17 You can change host and port by setting the following env variables
  18
  19 - `DEV_HOST` defaults to `127.0.0.1`
  20 - `DEV_PORT` defaults to `8080`
  21
  22 ## Supported Form Items
  23
  24 Here is the list of form items which are supported by the module:
  25
  26 1.  Checkboxes (Group)
  27 1.  Radio Button (Group)
  28 1.  Plain input (Text, Number)
  29 1.  Textarea
  30 1.  Matrix
  31 1.  Select
  32 1.  Agreement Item
  33 1.  Label Item
  34 1.  Upload (manages input of type "file")
  35
  36 ## Installation
  37
  38 `npm install @xenialab/angular-material-form-builder`
  39
  40 `npm install git+https://github.com/vlio20/angular-material-form-builder.git#v1.0.0`
  41
  42 Add the following styles and scripts to your `index.html`:
  43
  44 ```html
  45 <link
  46   rel="stylesheet"
  47   href="angular-material-form-builder/dist/styles/angular-material-form-builder.min.css"
  48 />
  49 <script src="angular-material-form-builder/dist/scripts/angular-material-form-builder.min.js"></script>
  50 ```
  51
  52 If you are using [wiredep](https://github.com/taptapship/wiredep) then just run in order to inject the module dependencies.
  53
  54 ## Use
  55
  56 In the form building step you need to use the `form-item` directive. Here is an example:
  57
  58 ```html
  59 <form-item type="multipleChoices" item="vm.item"></form-item>
  60 ```
  61
  62 This will produce the following form item:
  63 ![example2](http://i.imgur.com/6jOnwmu.png)
  64 **Note:** the _item_ attribute should receive an object `{}` and the _type_ attribute should receive one of the following: checkboxes, multipleChoices, input, textarea and matrix.
  65
  66 In order to preview the form you will need to use the `form-view` directive:
  67
  68 ```html
  69 <form-view form="main.form"></form-view>
  70 ```
  71
  72 **Note:** the _form_ attribute should receive the following object:
  73
  74 ```js
  75     {
  76         items: [{...}, {...}, ..., {...}]
  77     }
  78 ```
  79
  80 Each object in the `items` array should be the product of the `form-item` provided _item_ object.
  81
  82 ## Also - Use
  83
  84 You can also use `form-items-container` directive. This directives adds the option to handle movement and deletion of items in the list. You just need to pass it the form and it will make the rest for you. Here is a code example:
  85
  86 ```html
  87 <form-items-container form="main.form"></form-items-container>
  88 ```
  89
  90 _Action Attributes:_
  91 there are also the following attributes: `on-delete`, `on-up`, `on-down`, if provided then the action will appear at the top right left corner of the item. This attribute expects callback function which will be executed after clicking on the action. If you will provide the index of the item (like in the example below) you will also receive it in your callback.
  92 Here is HTML example:
  93
  94 ```html
  95 <form-item
  96   ng-repeat="item in main.form.items track by $index"
  97   type="{{item.type}}"
  98   item="item"
  99   index="$index"
 100   on-delete="main.delete(item, index)"
 101   on-up="main.up(item, index)"
 102   on-down="main.down(item, index)"
 103 >
 104 </form-item>
 105 ```
 106
 107 JS example:
 108
 109 ```js
 110 class MainController{
 111   ...
 112   delete(item, index) {
 113     vm.form.items.splice(index, 1)
 114   }
 115
 116   up(item, index) {
 117     if (index !== 0) {
 118       const prevItem = vm.form.items[index - 1]
 119       vm.form.items[index] = prevItem
 120       vm.form.items[index - 1] = item
 121     }
 122   }
 123
 124   down(item, index) {
 125     if (index !== vm.form.items.length + 1) {
 126       const nextItem = vm.form.items[index + 1]
 127       vm.form.items[index] = nextItem
 128       vm.form.items[index + 1] = item
 129     }
 130   }
 131   ...
 132 }
 133 ```
 134
 135 Check the [MainController](src/lib/main/main.controller.js) implementation for full code.
 136
 137 ## Contribution
 138
 139 1. Fork the repo
 140 1. Run `npm i` to install all dependencies (including dev deps)
 141 1. Run `npm start` in order to launch the live-reloading dev server
 142 1. Ensure tests pass, then commit your changes to a new branch with a meaningful name and make a pull request
 143 1. Report bugs and suggest enhancements.
 144
 145 ### Building
 146
 147 `npm run build` will make a new build (in the dist folder).
 148
 149 ### Testing
 150
 151 `npm test` will launch jest-based tests. They are run also automatically in VSCode but current coverage is modest (**Help wanted**).