# @jwaf/form

> ``` npm install @hibiscus/form ``` #### 📦 使用 ```typescrip import {FormModule} from '@hibiscus/form';

Latest version **1.0.0** (published 2019-02-07) · 0 weekly downloads

## Install

```sh
npm install @jwaf/form
pnpm add @jwaf/form
yarn add @jwaf/form
bun add @jwaf/form
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-02-07 |
| First published | 2019-02-07 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 377.5 KB |
| Known vulnerabilities | 0 (+24 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | gyjlovelh |

## Links

- npm: https://www.npmjs.com/package/@jwaf/form
- Repository: https://github.com/gyjlovelh/form
- Homepage: https://github.com/gyjlovelh/form#readme
- Issues: https://github.com/gyjlovelh/form/issues
- npm.io page: https://npm.io/package/@jwaf/form

## Dependencies (15)

- [rxjs](https://npm.io/package/rxjs.md) ^6.0.0
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.26
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.1.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^6.1.0
- [ng-zorro-antd](https://npm.io/package/ng-zorro-antd.md) 1.8.1
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.1.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.1.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^6.1.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^6.1.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^6.1.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^6.1.0
- [@ant-design/icons-angular](https://npm.io/package/@ant-design/icons-angular.md) ^2.0.1
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^6.1.0

## Recent versions

- 1.0.0 (latest) — 2019-02-07

## README

```
npm install @hibiscus/form
```
#### 📦 使用
```typescrip
import {FormModule} from '@hibiscus/form';  

@NgModule({
    imports: [
        ...
        FormModule
    ]
})
export class UserModule {}

```
---
#### 🎨 概述
> 基于angular6 和 ng-zorro-antd对表单的二次封装，简化表单配置书写，提供常用的模板和验证规则，目的是减少DOM的重复书写，将以往对Form的dom配置放在ts中完成，增强代码的可读性。

> 并且提供HsFormControlTemplate、HsFormLabelTEmplate等指令保证扩展性。
---
#### 🔨 API

**🆖HsFormComponent**

参数 | 描述 | 类型 | 默认值
---|---|---|---
==[rules]== | form的全部配置 | HsFormGroup | null
==[data]== | 表单数据 | any | null

**🆖HsFormControl**

> **field**: string 
- [x] 字段名
> **label**: string

> **type**: controlType
- [x] control模板类型，hs-form提供部分常用模板，配合hsFormControlTemplate传入自定义模板

> **extra**: string
- [x] 额外信息（简单文本）

> **readonly**: boolean
- [x] 当前control是否为只读

> **visiable**: visiableType 
- [x] control的可见的场景，默认在查看和修改模式下都可见

```
const control = new HsFormControl();
control.label = '密码';
control.visiable = 'modify';
```

> **transform**: Function 
- [x] 当readonly为true时，此函数保证文本的正确显示。
```
const control = new HsFormControl();
control.type = 'date';
control.transform = date => {
    return format(date, 'yyyy/MM/dd HH:mm:ss');
};
```





---

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