本项目由 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 |
npm install @kre-form/<package-name> --save3. 模块引入
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);
}
}