# API

# Get API

Global mode

const fApi = formCreate(rules)
const fApi = vm.$formCreate(rules)

Component mode

<form-create v-model="fApi"></form-create>

export default {
  data(){
    return {
      fApi: null
    }
  }
}

# Attribute

# rule

type rule = FormRule[]

Using：

const rules = fApi.rule

# Global configuration

type config = Object

Using：

const options = fApi.config

Alias fApi.options

# Form data

type form = { [field:string]:any }

Using：

const formData = fApi.form
formData.goods_name = 'huawei'

This property is two-way binding

# Field operation

# fields

type fields = ()=>string[]

Using：

const fields = fApi.fields()

# getValue

type getValue = (field:string) => any

Using：

const value = fApi.getValue('goods_name')

# setValue

Covering mode v2.5.0+

Undefined fields will be set to null

type coverValue = (formData:{[field:string]:any}) => void

Using：

fApi.coverValue({goods_name:'HuaWei'})

Combination mode

Do not modify undefined fields

interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}

Using：

fApi.setValue({goods_name:'HuaWei'})

Alias methods changeValue, changeField

# resetFields

interface resetFields {
    ():void
    (field:string[]):void
}

Using：

fApi.resetFields()

# Hidden (not rendered)

Component does not render

The Dom node is not rendered, which can prevent form validation from taking effect

interface hidden {
    //Hide all components
    (status:Boolean):void
    //Hide component
    (status:Boolean, field:string):void
    //Hide some components
    (status:Boolean, field:string[]):void 
}

Using：

fApi.hidden(true, 'goods_name')

# Hidden state

type hiddenStatus = (field:string)=>Boolean

Using：

const status = fApi.hiddenStatus('goods_name')

# Hidden ( rendering )

The CSS to hide

Hide components by 'display:none'

interface display {
    //Hide all components
    (status:Boolean):void
    //Hide component
    (status:Boolean, field:string):void 
    //Hide some components
    (status:Boolean, field:string[]):void 
}

Using：

fApi.display(false, 'goods_name')

# Hidden state

type displayStatus = (field:string)=>Boolean

Using：

const status = fApi.displayStatus('goods_name')

# Disabled

interface disabled {
    //Disable all components
    (status:Boolean):void 
    //Disable component
    (status:Boolean, field:string):void 
    //Disable some components
    (status:Boolean, field:string[]):void 
}

Using：

fApi.disabled(true, 'goods_name')

# Remove field

type removeField = (field:string) => FormRule

Using：

const rule = fApi.removeField('goods_name')

# Refresh component rendering

interface sync{
    //Update the specified component through the field
    (field:string):void
    //Update the specified component through the generation rule
    (rule:FormRule):void
}

Using：

fApi.sync('goods_name')

# Component method

Execution component method v2.5.0+

type exec = (field:string, method:string, ...args:any[]) => any

Using：

fApi.exec('goods_name','force')

Get component method

type method = (field:string, method:string) => Function

Using：

const method = fApi.method('goods_name','force')

# Trigger component events

type trigger = (field:string, event:string, ...args:any[]) => void

Using：

fApi.trigger('goods_name', 'on-change')

# Get the vm/dom of the component

type el = (field:string) => Vue|Document|undefined

Using：

const vm = fApi.el('goods_name')

# Close the alert of the frame component

type closeModal = (field:string) => void

Using：

fApi.closeModal('frame')

# Rule operation

# getRule

interface getRule {
    (field:string):Rule
    (field:string, origin: true): FormRule
}

Using：

const rule = fApi.getRule('goods_name')

origin parameter v2.5.0+

# Insert

Front insertion

interface prepend {
    //Insert into the first
    (rule:FormRule):void 
    //Insert in front of the specified field
    (rule:FormRule, field:string):void
    //Insert into the children of the specified field
    (rule:FormRule, field:string, child:true):void
}

Using：

fApi.prepend({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

Append

interface append {
    //Inserted into the last 
    (rule:FormRule):void 
    //Inserted following the specified field
    (rule:FormRule, field:string):void
    //Into the specified field children in
    (rule:FormRule, field:string, child:true):void
}

Using：

fApi.append({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

# Remove rule

type removeRule = (rule:FormRule) => FormRule

Using：

const rule = {type:'input', /** ... **/}
fApi.removeRule(rule)

# form component rules

interface model{                
    //Get Object rule
    ():Rule[]              
    //Get original rule
    (origin:true):FormRule[]
}

Using：

const rules = fApi.model()

origin parameter v2.5.0+

# Custom component rules

Can be obtained after defining the name configuration

interface component{                
    //Get Object rule
    ():Rule[]              
    //Get original rule
    (origin:true):FormRule[]
}

Using：

const componentRules = fApi.component()

origin parameter v2.5.0+

# Update rule

merge update

type mergeRule = (rule:Rule)=>void

Using：

fApi.mergeRule('goods_name', {hidden: true})

# Bulk update

type mergeRules = (rules:{[field:string]:Rule})=>void

Using：

fApi.mergeRules({'goods_name': {hidden: true}})

coverage update

type updateRule = (rule:Rule)=>void

Using：

fApi.updateRule('goods_name', {hidden: true})

Example🌰:

CodeSandbox (opens new window)

@vue/componsition-api version (opens new window)

# Bulk update

type updateRules = (rules:{[field:string]:Rule})=>void

Using：

fApi.updateRules({'goods_name': {hidden: true}})

# Verify operation

# Validate

type validate = (callback:(...args:any[]) => void)=> void

Using：

fApi.validate((valid, fail) => {
    if(valid){
        //todo 表单验证通过
    }else{
        //todo 表单验证未通过
    }
})

# ValidateField

type validateField = (field, callback:(...args:any[]) => void)=> void

Using：

fApi.validateField('goods_name', (valid, fail) => {
    if(valid){
        //todo success
    }else{
        //todo fail
    }
})

# Update validation rules

interface updateValidate{
    //coverage update
    (field:string, validate:Object[]):void
    //merge update
    (field:string, validate:Object[], merge:true):void
}

Using：

fApi.updateValidate('goods_name',[{required:true}], true)

# Bulk update

interface updateValidates{
    //coverage update
    (validates:{[field:string]: Object[]}):void
    //merge update
    (validates:{[field:string]: Object[]}, merge:true):void
}

Using：

fApi.updateValidates({'goods_name': [{required:false}]})

# Refresh validation rules

If the verification rule does not take effect after modifying, you can manually refresh it by this method

type refreshValidate = ()=>void

Using：

fApi.refreshValidate()

# Clear form validation status

interface clearValidateState {
    ():void
    (field:string, clearSub?:boolean):void
    (field:string[], clearSub?:boolean):void
}

Using：

fApi.clearValidateState('goods_name')

# Clear sub-form verification status

Can clear the validation status of group and object sub-forms

interface clearSubValidateState {
    (field:string):void
    (field:string[]):void
}

Using：

fApi.clearSubValidateState('goods_name')

# Form operation

# FormData

interface formData {
    //Get all data
    (): {[field:string]:any }
    //Get data of some fields
    (field:string[]): {[field:string]:any }
}

Using：

const formData = fApi.formData()

The return value of the method is not two-way binding

# FormData ( two-way binding )

type bind = () => { [field:string]:any }

Using：

const formData = fApi.bind()

This method is an alias for form attribute

# Change status

type changeStatus = ()=>Boolean

Using：

const status = fApi.changeStatus()

# Clear change status

type clearChangeStatus = ()=>void

Using：

fApi.clearChangeStatus()

# Modify submit button

type submitBtnProps = (props:Object) => void

Using：

fApi.submitBtnProps({disabled:true})

Quick operation:
- fApi.btn.loading(true) set the submit button to enter the loading state
- fApi.btn.disabled(true) set the submit button disabled
- fApi.btn.show(true) set the submit button display status

# Modify reset button

type resetBtnProps = ( props:Object) => void

Using：

fApi.resetBtnProps({disabled:true})

Quick operation:
- fApi.resetBtn.loading(true) set the reset button to enter the loading state
- fApi.resetBtn.disabled(true) set the reset button disabled
- fApi.resetBtn.show(true) set the reset button display status

# Update form configuration

type updateOptions = (options:Object) => void

Using：

fApi.updateOptions({form:{inline:true}})

Example🌰：

CodeSandbox (opens new window)

# Update submit event

type onSubmit = (callback:(formData:Object,fApi:fApi)=>void) => void

Using：

fApi.onSubmit((formData, fApi)=>{
    //todo submit
})

# Refresh form configuration

type refreshOptions = ()=>void

Using：

fApi.refreshOptions()

# Refresh form rendering

type refresh = ()=>void

Using：

fApi.refresh()

# Hide form

type hideForm = (hide:Boolean)=>void

Using：

fApi.hideForm(true)

# Reload form

interface reload{
    ():void
    (rules:FormRule[]):void
}

Using：

fApi.reload()

# Destroy form

type destroy = () => void

Using：

fApi.destroy()

# Callback after the form is rendered

type nextTick = (callback:Function) => void

Using：

fApi.nextTick(() => {
    //todo rendered callback
})

# Auto Refresh

If the form is not refreshed after the callback is executed, it will automatically refresh the form rendering

type nextRefresh = (callback:Function) => void

Using：

fApi.nextRefresh(() => {
    //todo operation
})

# submit Form

type submit = (success?: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void

Using：

fApi.submit((formData, fapi) => {
    //todo submit
},()=>{
    //todo form validation failed
})

# Get form json rules

type toJson = () => string

Using：

const jsonString = fApi.toJson()

# on

Parameters：
- {string} emitName generate rule emit event name
- {Function} callback callback

Using：

/*
rule:{
  field:'goods-name'
  //...
  emit:['on-change']
}
*/

fApi.on('goods-name-on-change',() => {
  //TODO
})

# once

Parameters：
- {string} emitName generate rule emit event name
- {Function} callback callback

Using：

/*
  rule:{
    field:'goods-name'
    //...
    emit:['on-change']
  }
  */
fApi.once('goods-name-on-change',() => {
  //TODO
})

Listen to a custom event, but only trigger it once, remove the listener after the first trigger

# Remove event listener

Parameters：
- {string | Array} emitName generate rule emit event name
- {Function} [callback] callback
Using： Remove custom event listener.
- If no parameters, then remove all the event listeners;
- If only the event, then remove all the event listeners;
- If both events and callbacks, only remove this callback listener.
```
fApi.off('goods-name-on-change')
// fApi.off('goods-name-on-change', fn)
```

# fApi.set

Parameters：
- {object} node
- {string} key
- {any} value
Using：
```
fApi.set(field.rule.col,'span',12)
```
If the page is not updated after modifying the rules of the component, you can try this method, which is the same as Vue.$set