kre-form/README.md

本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装

本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装

## 支持 UI 组件库

| UI
| ---------------
| ANT >= 8.5.1  
| IONIC >= 4.8.0
|
|

#### 1. 必须引入 @angular/forms 和 @kre-form/core 包:
 
#### 2. 选择引入你需要的 UI 组件包:

| UI      | Npm package name    | NgModule            |
| ------- | ------------------- | ------------------- |
| [ANT]   | `@kre-form/ant`   | `KreFormAntModule`   |
| [Ionic] | `@kre-form/ionic` | `KreFormIonicModule` |

```bash
  npm install @kre-form/<package-name> --save
```

#### 3. 模块引入

```typescript
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {KreFormModule} from '@kre-form/core';
import {KreFormAntModule} from '@kre-form/ant';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    KreFormModule.forRoot(),

    /**
     * - Bootstrap:    KreFormAntModule
     * - Ionic:        KreFormIonicModule
     */
    KreFormAntModule,
  ],
})
export class AppModule {}
```

#### 4. 页面具体配置

```typescript
import { Component } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { KreFormModule } from "@kre-form/core";

@Component({
  selector: "app",
  template: `
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <kreform
        [fields]="fieldConfig"
        [form]="form"
        [model]="model"
        [options]="options"
      >
      </kreform>

      <button type="submit" class="btn btn-default">提交</button>
    </form>
  `
})
export class AppComponent {
  form = new FormGroup({});
  model = { name: "jack" };
  options = {};
  fieldConfig: KreFormFieldConfig[] = [
    {
      key: "name",
      type: "input",
      templateOptions: {
        label: "姓名",
        placeholder: "请输入姓名",
        required: true
      }
    }
  ];

  submit(model) {
    console.log(model);
  }
}
```