dq-form
dq-form
is a flexible form library. it's can drag exist plugins to generate form~
depend on react
, ant-design
Install
npm install dq-form
// OR
yarn add dq-form
Other Externals Library
npm install antd react react-dom
// or
yarn add antd react react-dom
UseAge
import Editor, {
Text,
Amount,
Number,
Mail,
MultipleChoice,
SingleChoice,
Area,
Autograph,
Certificates,
DateTime,
DateTimeRange,
File,
Level,
Phone,
Remark,
Preview,
PreviewForm
} from 'dq-form'
import 'dq-form/dist/index.css'
export default class Demo extends React.Component {
// ....
render() {
return (
<div className={'demoEditor'}>
<Editor plugins={plugins}/>
</div>
)
}
}
ReactDOM.render(
<React.StrictMode>
<Demo />
</React.StrictMode>,
document.getElementById('root')
);
Init Form Data
<Editor plugins={plugins} data={data}/>
Operation
this.editor = React.createRef()
// getData
this.editor.current.getEditorJSON(true: (bool, is need verify),(obj) => {
console.log(obj)
})
<Editor plugins={plugins} ref={this.editor} data={data}/>
Preview Form
this.formRef = React.createRef()
this.formRef.current.validateFields()
.then(res => console.log('formData', res))
// this component only contain form
<PreviewForm data={this.state.data} ref={this.formRef} plugins={plugins} width={600}/>
//OR
// this component will show original Form
<Preview data={this.state.data} renderHeader={customHeader} defaultHeader={defaultHeaderIsNeedShow} ref={this.formRef} plugins={plugins} width={600}/>
Api
parameter |
description |
type |
plugins |
Form plugins, can operation |
PluginsData[] |
data |
Init from data |
FormData |
FormData
key |
description |
type |
name |
Form name |
string |
description |
form description |
string |
plugins |
pluginConfigData |
pluginConfigData[] |
pluginConfigData
key |
description |
type |
id |
id |
number |
layers |
Layers |
LayersData[] |
LayersData
key |
description |
type |
id |
id |
number |
type |
type |
string |
typeName |
typeName |
string |
name |
form Item name eg: {'name': 123}
|
string |
description |
description |
string |
require |
isrequire |
boolean |
repeat |
isrepeat |
boolean |
colspan |
width |
number |
explain |
explain |
String |
more... |
|
|
PluginsData
key |
description |
type |
type |
Form name |
string |
info |
form description |
Object |
config |
pluginConfigData |
LayersData |
layer |
React Component |
|
editor |
React Component |
|
If Exist Plugin Can't Accord With Requirement, We can Import Custom Plugin。。。