# Common problem

Warn

fApi is the instance returned after the form is created, field is the field name, and rule is the form generation rule

# Manually modify the value of a field

  1. fApi.bind()[field] = 'after'
  2. fApi.model()[field].value = 'after'
  3. rule[2].value = 'after'
  4. fApi.setValue(field,value)

# Batch assignment

fApi.setValue({[field1]:value1,[field2]:value2})

# Dynamically modify form rules

  1. fApi.model()[field].props.disabled = false
  2. rule[2].props.disabled = false

Description: Modified attributes need to be predefined in the build rule in advance

# Append form field

  1. Add an image upload component after the goods_name field, which is added to the tail by default.

    fApi.append($formCreate.maker.upload(
        '产品主图',
        'logo',
        'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
    ).props({
              "action": "",
              "maxLength": 1,
              "multiple": false,
              "type": "select",
              "uploadType": "image",
              "name": "file",
              "onSuccess": function (res, file) {
                  file.url = res.data;
              }
         })
         .validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'}
    ),'goods_name');
    
  2. Add a input component before the goods_name field, which is added to the header by default.

    fApi.prepend({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
    },'goods_name');
    
  3. Append an input component to the end of the form

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

# Delete form field

  1. Delete specified field

    fApi.removeField(field);
    
  2. Delete the last field

    rules.pop()
    

# Hide specified fields

  1. fApi.hidden(true, field)

# Generate a form based on the rules returned in the background

fetch('api').then(rule=>{
    fApi = formCreate.create(rule,{
        onSubmit(formData){
            // 表单提交事件
            fApi.btn.loading(true);
            //TODO 提交表单
        }
    })
})

# Hide default submit button

Set the global configuration options.submitBtn = false to hide

# Custom default submit button

 option: {
      submitBtn: {
        type: "basic",
        size: "mini",
        icon: "",
        shape: "round",
        innerText: "submit",
        col: {
          span: 4,
          offset: 10
        }
      }
  }

# Show default reset button

Set the global configuration options.resetBtn = true to display

# Vue version does not support compile

vue-version

Use the selected full version of Vue

# Obtain $f

reference

# Method of calling an outer component in a configuration item

reference #51 (opens new window)

# Rules are being used in other form-create

A build rule rule can only be used at the same time in a <form-create>. If you need to use it multiple times:

  • Self-deep copy before use**
  • Removed from the used <form-create>

# Invalid validation rule

Note the data type of value. If the component is multi-select or interval select, the data type of value is Array, you need to set type:'array' in the validation rule.

# switch component does not display

Configure the slot configuration item in props

props: {
    "trueValue":"1", 
    "falseValue":"0",
    "slot": {
        open:"上架", 
        close:"下架", 
    }, 
}

# The page is not updated after modifying the component value

The modification is invalid after the form is created and before it is successfully rendered.

  • Modify before generating the form
  • Modify in option.mounted
  • Modify after the first form is rendered