# rc-hook-form

Latest version **1.0.8** (published 2019-12-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install rc-hook-form
pnpm add rc-hook-form
yarn add rc-hook-form
bun add rc-hook-form
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2019-12-11 |
| First published | 2019-12-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 35.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | duqiang |
| Maintainers | duqiang |

## Links

- npm: https://www.npmjs.com/package/rc-hook-form
- Repository: https://github.com/duqiang1992/rcHookForm
- Homepage: https://github.com/duqiang1992/rcHookForm#readme
- Issues: https://github.com/duqiang1992/rcHookForm/issues
- npm.io page: https://npm.io/package/rc-hook-form

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.12.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [async-validator](https://npm.io/package/async-validator.md) ^3.2.2

## Recent versions

- 1.0.8 (latest) — 2019-12-11
- 1.0.7 — 2019-12-11
- 1.0.6 — 2019-12-10
- 1.0.5 — 2019-12-10
- 1.0.4 — 2019-12-10
- 1.0.3 — 2019-12-10
- 1.0.2 — 2019-12-10
- 1.0.1 — 2019-12-10
- 1.0.0 — 2019-12-10

## README

### rc-Hook-Form


##### 使用

###### 安装

```
 yarn add rh-hook-form

```

* 目前默认在onchange时候做了表单验证

```
import React, { useRef, useState } from 'react';

import rcHookForm from 'rc-hook-form';

import "rc-hook-form/dist/index.css";

const { Form, FormItem } = rcHookForm;

const rules = {
  name: [
    {
      message: '必填',
      required: true,
    },
    {
      message: '邮箱',
      type: 'email',
    }
  ],
};

const form2 = {
  name: '',
  count: 2,
  time: [
    {
      id: 1
    }
  ],
};

function Test() {
  const formRef = useRef();
  const submitForm = () => {
    formRef.current.validatorForm((result, formData) => {
      console.log(result);
      console.log(formData);
    });
  };
  return (<div>
    <Form ref={formRef} labelPosition="left">
      <FormItem label="活动名称" isRequire prop="name" rules={rules.name} defaultValue={form.name}>
        <input fromctr="true" className='xt-input' type="text" />
      </FormItem>
      <button onClick={submitForm}>提交</button>
    </Form>
  </div>);
};

export default Test;

```

#### Form


| 参数        | 类型    |  默认值  |   描述    |
| --------   | -----:   | :----: |:----: |
| labelPosition  | string | left |  label对齐方式（left,top,right）  |
| className  |  string    |       |  form组件classname |
| ref | React-ref  |       |  form的ref，通过此调用form方法 |

###### ref 上的方法

* ref.getFormData(format) 返回当前整个表单值

> format // 需要格式话成的form数据结构
>>> 若表单无深层嵌套无需传递

```
 let form = {
    a: {
        b: {
            value: ''
        }
    }
 }

通过输入框改变value值为2

调用 ref.getFormData()
返回 { a.b.value: 2 }

调用 ref.getFormData(form)
返回 {
   a: {
       b: {
           value: 2
       }
   }
}
```

* ref.validatorForm(call, format) 验证整个表单返回结果和表单值

>> call(resule, formData)
>>> resule 布尔值标识验证是否通过
>>> formData 表单数据

>> format 与ref.getFormData(format)一致


##### FormItem

* 注意：表单中的真正表单组件上需要添加formctr="true",让FormItem知道此组件为真正需要受控的表单组件

```
 <FormItem label="用户名" isRequire prop="name" rules={rules.name} defaultValue={form.name}>
   <input fromctr="true" className='xt-input' type="text" />
   <span>163/qq等邮箱</span>
</FormItem>
 <FormItem label="计数器" isRequire prop="count" rules={rules.count} defaultValue={form.count}>
   <Test fromctr="true"/>
   <span>计数</span>
 </FormItem>

```

| 参数   | 类型    |  默认值  |   描述    |
| --------   | -----:   | :----: |:----: |
| label  | string |  |  label名称  |
| defaultValue  |  any    |       |  默认值 |
| contentClass | className  |       | 表单容器的className |
| errClass | className  |       | 错误信息容器的className |
| rules | Object || arry  |       | 验证规则 |
| isRequire | boolean || false  |       | label前显示必填样式 |
| prop | string || 必填  |       | 当前属性在表单对象中的位置 |

* prop 说明

```
let form = {
    a: '',
    b: [
        {
            name: ""
        }
    ]
}

FormItem  a 对应的prop为 prop="a"
FormItem  b[1] 对应的prop为 prop='b[1]['name']'
```

### 表单验证

* 详情规则可以查看 [async-validator](https://www.npmjs.com/package/async-validator)

```
const rules = {
   name: [
     {
       message: '必填',
       required: true,
     },
     {
       message: '邮箱',
       type: 'email',
     },
     {
        message: '同步自定义验证规则',
        validator: (rule, value) => value === 'muji',
     },
     {
        message: '异步自定义验证规则',
        asyncValidator: (rule, value) => {
           return new Promise((resolve, reject) => {
             if (value < 18) {
               reject("too young");  // reject with error message
             } else {
               resolve();
             }
           });
        }
     },
   ],
 };
```

##### 自定义非原生表单组件（input radio 等），使用遵循规范

```
const Test = function({ value, onChange }) {
  const [count, setCount] = useState(value);
  const addCount = () => {
    const value = count + 1;
    setCount(value);
    // FotmItem组件会为你的组件自动注入一个onChange事件，在自定义组件中修改值后，要将值传递给form,调用onChang按照如下格式使用
    onChange({
      target: {
        value: value,
      },
    });
  };
  return (<div onClick={addCount}>{count}</div>);
};

```

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