kre-form v5.8.204

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

支持 UI 组件库

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

1. 必须引入 @angular/forms 和 @kre-form/core 包:

2. 选择引入你需要的 UI 组件包:

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

3. 模块引入

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. 页面具体配置

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);
  }
}