本项目由 Angular8+ 编写的表单设计器和表单应用,所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装
npm install kre-form本项目由 Angular8+ 编写的表单设计器和表单应用,所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装
| 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/
#### 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:
})
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);
}
}
``