Background description

In the daily use of forms, in the face of many special business scenarios, you need to set some events for some controls in the form to do custom operations. To do this, we added new functionality to the FormMaking form designer that allows you to quickly bind events to elements in the form, making the form more extensible.

As you can see from the official documentation, the new version adds the getComponent method to get form item components. Let’s use a simple example to show how to dynamically add events to a form.

Add a click event to the form input field

When you’re developing a form, you often have a requirement that when you click on a text box, a modal box pops up and you do something and then you return the result to the text box; This is where you need to add click events to the text box to handle the subsequent operations.

Let’s implement a simple example, click the text box, the pop-up prompt box, click OK to assign a value to the text box.

  1. Add a text box in the designer and change the field identifier toname.

  1. Click to generate code, copy it to our code editor and bind the click event.
<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      :value="editData" 
      :remote-option="dynamicData"
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list": [{"type":"input"."icon":"icon-input"."options": {"width":"100%"."defaultValue":""."required":false."requiredMessage":""."dataType":""."dataTypeCheck":false."dataTypeMessage":""."pattern":""."patternCheck":false."patternMessage":""."placeholder":""."customClass":""."disabled":false."labelWidth":100."isLabelWidth":false."hidden":false."dataBind":true."showPassword":false."remoteFunc":"func_1608119316839"."remoteOption":"option_1608119316839"},"name":"One line of text"."key":"1608119316839"."model":"name"."rules": []}],"config": {"labelWidth":100."labelPosition":"right"."size":"small"."customClass":""."ui":"element"."layout":"horizontal"."labelCol":3."width":"100%"."hideLabel":false."hideErrorMessage":false}},
      editData: {},
      remoteFuncs: {},dynamicData: {
        
      }
    }
  },
  mounted () {
    this.$refs.generateForm.getComponent('fm-name').$el.onclick = () = > {
      this.$alert('You clicked on me'.'tip').then(() = > {
        this.$refs.generateForm.setData({
          name: '123'}}}})),methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data= > {
        // Data verification succeeded
        alert(JSON.stringify(data))
      }).catch(e= > {
        // Data verification failed})}}}</script>
Copy the code

Mounted getComponent(‘fm-name’) finds the VueComponent object in the form designer that identifies the field bound to each form item. The VueComponent object returns the VueComponent object. We can get the native DOM with its $el, and we can bind native events to it.

The effect is as follows:

The form quickly locates to the input box

Sometimes we need to open a form with the default cursor in the input box. We can also use the getComponent method to find the component and call the Focus method to do so.

Using the same form as above, let’s look at the code:

this.$refs.generateForm.getComponent('fm-name').focus()
Copy the code