# 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})

# 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}})

# 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