# daform

> daform 是一个高效开发表单的 one for all 方案。

Latest version **0.1.2** (published 2018-12-19) · 0 weekly downloads

## Install

```sh
npm install daform
pnpm add daform
yarn add daform
bun add daform
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-12-19 |
| First published | 2018-12-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 43 |
| Unpacked size | 9.3 MB |
| Known vulnerabilities | 0 (+8 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | muyunyun |

## Links

- npm: https://www.npmjs.com/package/daform
- npm.io page: https://npm.io/package/daform

## Dependencies (43)

- [raf](https://npm.io/package/raf.md) 3.4.0
- [less](https://npm.io/package/less.md) ^3.8.1
- [chalk](https://npm.io/package/chalk.md) 1.1.3
- [react](https://npm.io/package/react.md) ^16.6.3
- [dotenv](https://npm.io/package/dotenv.md) 4.0.0
- [tslint](https://npm.io/package/tslint.md) ^5.7.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.15.0
- [resolve](https://npm.io/package/resolve.md) 1.6.0
- [ts-jest](https://npm.io/package/ts-jest.md) 22.0.1
- [webpack](https://npm.io/package/webpack.md) 3.8.1
- [fs-extra](https://npm.io/package/fs-extra.md) 3.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.3
- [ts-loader](https://npm.io/package/ts-loader.md) ^2.3.7
- [babel-jest](https://npm.io/package/babel-jest.md) 20.0.3
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [css-loader](https://npm.io/package/css-loader.md) 0.28.7
- [url-loader](https://npm.io/package/url-loader.md) 0.6.2
- [file-loader](https://npm.io/package/file-loader.md) 1.1.5
- [jest-enzyme](https://npm.io/package/jest-enzyme.md) ^7.0.1
- [less-loader](https://npm.io/package/less-loader.md) ^4.1.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) 7.1.6
- [babel-loader](https://npm.io/package/babel-loader.md) 7.1.2
- [react-router](https://npm.io/package/react-router.md) ^4.3.1
- [style-loader](https://npm.io/package/style-loader.md) 0.19.0
- [tslint-react](https://npm.io/package/tslint-react.md) ^3.2.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) 2.0.8
- [async-validator](https://npm.io/package/async-validator.md) ^1.10.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^5.0.2
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [source-map-loader](https://npm.io/package/source-map-loader.md) ^0.2.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.11.3
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 2.29.0
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^3.1.2
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 3.2.0
- [tslint-config-prettier](https://npm.io/package/tslint-config-prettier.md) ^1.10.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) 1.2.5
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 1.3.2
- [sw-precache-webpack-plugin](https://npm.io/package/sw-precache-webpack-plugin.md) 0.11.4
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 3.0.2
- [tsconfig-paths-webpack-plugin](https://npm.io/package/tsconfig-paths-webpack-plugin.md) ^2.0.0
- [fork-ts-checker-webpack-plugin](https://npm.io/package/fork-ts-checker-webpack-plugin.md) ^0.2.8
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.1.1

## Recent versions

- 0.1.2 (latest) — 2018-12-19
- 0.1.1 — 2018-12-17
- 0.1.0 — 2018-12-17

## README

daform 是一个高效开发表单的 one for all 方案。

### Philosophy

* 双向绑定
* 栅格化布局
* 错误逻辑集中化管理
* 动态表单的解决方案
* 不依赖第三方状态管理库
* 可自由搭配第三方 UI 组件库

> [issue](https://github.com/dwd-fe/daForm/issues/1)

> 文档开发中...

### Install

```
npm install daform
```

> 确保 React 版本为 ^16.6.3, 关于 React 16 特性可参考 [React 特性剪辑(版本 16.0 ~ 16.9)](https://github.com/dwd-fe/daForm/issues/10)

### Basic Usage

```js
import React from 'react'
import { Input } from 'antd'
import { Form, FormItem } from 'daForm'

@Form()
class Demo1 extends React.Component {
  render() {
    return (
      <>
        <FormItem name="name" label="姓名"><Input /></FormItem>
        <FormItem name="age" label="年龄"><Input /></FormItem>
      </>
    )
  }
}
```

### Dynamic Form

daForm 内置了动态表单组件 `<Dynamic>`, 使用其可以快速完成增删配置需求。

```js
import React from 'react'
import { Input } from 'antd'
import { Form, FormItem } from 'daForm'

@Form()
class Demo1 extends React.Component {
  render() {
    return (
      <Dynamic>
        <FormItem name="name" label="姓名"><Input /></FormItem>
        <FormItem name="age" label="年龄"><Input /></FormItem>
      </Dynamic>
    )
  }
}
```

### API

#### Form

经过 `Form` 装饰的组件后具有 `form` 和 `errorFields` 对象。

* `form` 提供的 api 见如下表格:

| 属性/方法 | 意义 |
| :-: | :-: |
| formData | 当前所有表单字段的数据映射 |
| getFormItem(itemName) | 获取某一个表单字段的值 |

* `errorFields` 包含当前表单的报错消息, 其等同于 [async-validator](https://github.com/yiminghe/async-validator#usage) 中的 fields 属性。

#### FormItem

`FormItem` 接受的属性见如下表格:

| 属性 | 意义 | 必填 | 默认 |
| :-: | :-: | :-: | :-: |
| name | 表单传输的名字 | yes |  |
| label | 表单的名字 | no | '' |
| colon | 是否带分号 | no | true |
| inline | 是否内联 | no | false |
| labelCol | 表单的名字占位 | no | 8 |
| wrapCol | 表单占位 | no | 16 |
| disable | 是否禁用 | no | false |
| initialValue | 初始(默认)值 | no | |

#### Dynamic

`Dynamic` 接受的属性见如下表格:

| 属性 | 意义 | 必填 | 默认 |
| :-: | :-: | :-: | :-: |
| initialValue | 动态表单的初始值(数组) | no | |

### Test

```
npm test
```

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