form-create

# 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

← Global API →