# primeng-form-builder

> a form for admin system,depend on primeng

Latest version **1.1.4** (published 2017-08-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install primeng-form-builder
pnpm add primeng-form-builder
yarn add primeng-form-builder
bun add primeng-form-builder
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2017-08-17 |
| First published | 2017-07-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mango-csl |
| Maintainers | buildercsl |
| Keywords | form, builder |

## Links

- npm: https://www.npmjs.com/package/primeng-form-builder
- npm.io page: https://npm.io/package/primeng-form-builder

## Dependencies (2)

- [primeng](https://npm.io/package/primeng.md) ^2.0.3
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.4 (latest) — 2017-08-17
- 1.1.3 — 2017-08-09
- 1.1.2 — 2017-08-08
- 1.1.1 — 2017-08-01
- 1.1.0 — 2017-08-01
- 1.0.3 — 2017-07-20
- 1.0.2 — 2017-07-19
- 1.0.1 — 2017-07-19
- 1.0.0 — 2017-07-19

## README

# form-builder

## 简介
基于primeng的复杂后台表单构造组件，提供验证(可扩展规则、支持自定义函数)、关联项选值、弹窗选值

## 安装

```
npm install primeng-form-builder
```

推荐使用angular cli---

package.json配置
```
"dependencies": {
    ...
    "primeng-form-builder": "^1.1.0"
    ...
}

```
angular-cli.json---引入primeng样式


```
"styles": [
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
],
```


## 使用

- 在module导入`FormBuilderModule`

```
import {FormBuilderModule} from "primeng-form-builder";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FormBuilderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

- 准备表单内容

```
  questions: QuestionBase<any>[] = [
    new TextboxQuestion({
      key: 'name',
      label: '巡检任务名',
      required: true
    }),
    new CalendarQuestion({
      key: 'startTime',
      label: '巡检开始时间',
      required: true
    }),
    new TextboxQuestion({
      key: 'cycleDays',
      label: '巡检周期(天)',
      required: true,
      validateFn: [{
        name: 'numberRange'
      }]
    }),
    new RadiobuttonQuestion({
      key: 'cycle',
      label: '定期巡检',
      items: [
        {label: '是', value: true},
        {label: '否', value: false},
      ],
      required: true
    })
  ];

  submit(data) {
    console.dir(data);
  }
```

- 在模板页面使用

```
<app-form [questions]="questions" (submitData)="submit($event)"></app-form>
```

---
_Source: https://npm.io/package/primeng-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._