# Components

## MakingForm

You can create a form by drag an drop the component from left side to the design area.

### API

#### Props

| <div style="width: 120px;">name </div> | <div style="width: 287px;">description</div> | <div style="width: 100px;">type</div> | <div style="width: 100px;">default</div> |
| --- | ----------------------------------------- | ---------- | ---------------------------- |
| preview | display preview button. | Boolean | fasle |  |
| generate-json | display generate json button. | Boolean | false |  |
| generate-code | display generate code button. | Boolean | false |  |
| clearable | display clearable button. | Boolean | false |  |
| upload | display upload button. | Boolean | false | |
| basic-fields | Configure the component on the left, for default it will show all the basic fields. | Array | ['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text'] |  |
| advance-fields | configure the component on the left, for default it will show all the advanced fields | Array | ['blank', 'imgupload', 'editor', 'cascader'] | |
| layout-fields | configure the layout on the left, for default it will show all the layout | Array | ['grid'] | |


#### Slots

| name | description |
| --- | --- |
| action | Custom area at the top of the designer. |

#### Methods

You can get an instance of GenerateForm with `ref`, and invoke the instance method.

| name | description | parameter |
| --- | --- | --- |
| getJSON | Get the JSON data generated by the form generator | - |
| getHtml | Get the html code generated by the form generator | - |
| setJSON | Set the configuration for for designer | (value) the Json data get via getJson function |
| clear  | clear components | - |

### Example

#### Custom Button

``` html
<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- Custom operation area slot -->
      <el-button type="text" icon="el-icon-upload">save</el-button>
    </template>
  </fm-making-form>
</template>
```

#### Component Configuration

``` html
<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>
```

#### Instance Methods

```html
<fm-making-form 
  ref="makingform" 
  style="height: 500px;" 
  preview 
  generate-code 
  generate-json
>
</fm-making-form>
```

```js
const json = this.$refs.makingform.getJSON()
```

## GenerateForm

The JSON data that generated by the Form generator 
You can create a form rapidly with the JSON data created by the form generator,and you also can validate and get the form data by just click a button.

### API

#### Props

| <div style="width: 120px;">name </div> | <div style="width: 287px;">description</div> | <div style="width: 100px;">type</div> | <div style="width: 100px;">default</div> |
| --- | ----------------------------------------- | ---------- | ---------------------------- |
| data | JSON data used to create a form | Object | - |
| value | Form data | Object | - |
| remote | remote function configure in form generator | Object | {} |

#### Events

| <div style="width: 150px;">name </div> | <div style="width: 290px;">description</div> | <div style="width: 200px;">callback</div> |
| --- | --- | --- |
| on-change | called when form data changed | field: field id of the changed dada<br>value: the new value <br>data: form data |

#### Methods

You can get an instance of GenerateForm with `ref` , and invoke the instance method

| name | description | parameter |
| --- | --- | --- |
| getData | get the form data | - |
| reset | reset the format data | - |

### Example

#### Generate Form

``` html
<fm-generate-form 
  :data="jsonData" 
  ref="generateForm"
>
</fm-generate-form>
```

``` javascript
export default {
  data () {
    return {
      jsonData: {
        "list": [/* ... */],
        "config": {
          "labelWidth": 100,
          "labelPosition": "right",
          "size": "small",
          "customClass": ""
        }
      }
    }
  }
}
```

`jsonData` You can get this data by click the 'Generate JSON' button in the form generator page.

#### Get the form data dynamically

When you need to get the form data  dynamically (such as a input component need to be edited), you need bind  the `value` parameter.
```html
<fm-generate-form 
  :data="jsonData"
  :value="formData"
  ref="generateForm"
>
</fm-generate-form>
```
```javascript
export default {
  data () {
    return {
      formData: {
        name: 'Gavin'
      }
    }
  }
}
```

#### Validate and get the form data

After you call  `getData` method, it will validate the data format, and then if the validation is pass it will return a JSON data contains all the available form data.

``` html
<fm-generate-form
  :data="jsonData"
  ref="generateForm">
</fm-generate-form>
```

``` javascript
this.$refs.generateForm.getData().then(data => {
  // Get data success
}).catch(e => {
  // Get data faild
})
```