• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

vlio20/angular-material-form-builder: A form builder with the Material design

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

vlio20/angular-material-form-builder

开源软件地址(OpenSource Url):

https://github.com/vlio20/angular-material-form-builder

开源编程语言(OpenSource Language):

JavaScript 64.9%

开源软件介绍(OpenSource Introduction):

Angular Material Form Builder!

Now supporting Angular >= 1.8.2!

This module enables you to easily build forms, just the way you do it in Google forms.
The Module has two directives, one to create the form and the second to preview it: example1


DEMO

Run npm start

It should open the browser on http://127.0.0.1:8080

You can change host and port by setting the following env variables

  • DEV_HOST defaults to 127.0.0.1
  • DEV_PORT defaults to 8080

Supported Form Items

Here is the list of form items which are supported by the module:

  1. Checkboxes (Group)
  2. Radio Button (Group)
  3. Plain input (Text, Number)
  4. Textarea
  5. Matrix
  6. Select
  7. Agreement Item
  8. Label Item
  9. Upload (manages input of type "file")

Installation

npm install @xenialab/angular-material-form-builder

npm install git+https://github.com/vlio20/angular-material-form-builder.git#v1.0.0

Add the following styles and scripts to your index.html:

<link
  rel="stylesheet"
  href="angular-material-form-builder/dist/styles/angular-material-form-builder.min.css"
/>
<script src="angular-material-form-builder/dist/scripts/angular-material-form-builder.min.js"></script>

If you are using wiredep then just run in order to inject the module dependencies.

Use

In the form building step you need to use the form-item directive. Here is an example:

<form-item type="multipleChoices" item="vm.item"></form-item>

This will produce the following form item:
example2 Note: the item attribute should receive an object {} and the type attribute should receive one of the following: checkboxes, multipleChoices, input, textarea and matrix.

In order to preview the form you will need to use the form-view directive:

<form-view form="main.form"></form-view>

Note: the form attribute should receive the following object:

    {
    	items: [{...}, {...}, ..., {...}]
    }

Each object in the items array should be the product of the form-item provided item object.

Also - Use

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:

<form-items-container form="main.form"></form-items-container>

Action Attributes: 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. Here is HTML example:

<form-item
  ng-repeat="item in main.form.items track by $index"
  type="{{item.type}}"
  item="item"
  index="$index"
  on-delete="main.delete(item, index)"
  on-up="main.up(item, index)"
  on-down="main.down(item, index)"
>
</form-item>

JS example:

class MainController{
  ...
  delete(item, index) {
    vm.form.items.splice(index, 1)
  }

  up(item, index) {
    if (index !== 0) {
      const prevItem = vm.form.items[index - 1]
      vm.form.items[index] = prevItem
      vm.form.items[index - 1] = item
    }
  }

  down(item, index) {
    if (index !== vm.form.items.length + 1) {
      const nextItem = vm.form.items[index + 1]
      vm.form.items[index] = nextItem
      vm.form.items[index + 1] = item
    }
  }
  ...
}

Check the MainController implementation for full code.

Contribution

  1. Fork the repo
  2. Run npm i to install all dependencies (including dev deps)
  3. Run npm start in order to launch the live-reloading dev server
  4. Ensure tests pass, then commit your changes to a new branch with a meaningful name and make a pull request
  5. Report bugs and suggest enhancements.

Building

npm run build will make a new build (in the dist folder).

Testing

npm test will launch jest-based tests. They are run also automatically in VSCode but current coverage is modest (Help wanted).




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap