Form enables real-time data checking

1. Use background

In some business scenarios where data uniqueness needs to be ensured, use this tutorial to verify and check data. Different fromEXIST functionThis method can realize real-time verification during data entry.

2. Video demonstration

To be added, please look forward...

3. Implementation steps

3.1 Step 1: form design

Create a form and enter test data.

Procedure:

1. Create a common form named real-time verification of single-line text.
2. Add single-line text and drop-down radio components to the form (subsequent drop-down radio components can be hidden, but you need to set the always submit attribute).

3. Enter a data backup.

(The operation effect is shown in Figure 3.1-1).

Figure 3.1-1 form page design

3.2 Step 2: verify by creating a data source

Create a remote data source for data re-checking. Create a variable data source for collecting and displaying error messages.

3.2.1 create a remote data source

You need to call an interface here. For more information, see:Search form instance details by criteriaDocument.

Procedure:

1. Click the data source button on the left side of the edit form named "real-time verification of single-line text.
2. Click the Add button in the data source dialog box and select the "quickly create remote API" option.

3. Name the data source getData ".
4. Turn off the auto load button ".

5. The request address is configured/dingtalk/web/replace this with APPTYPE/v1/form/searchFormDatas.json of your application.
6. Click the "save" button.

(The operation effect is shown in Figure 3.2-1)

3.2.2 create a variable data source

Create a variable data source to store the prompt information when the submission is blocked.

Procedure:

1. Click the data source button on the left side of the edit form named "real-time verification of single-line text.
2. Click the Add button in the data source dialog box and select the variable option.

3. Name the data source errMsg ".
4. Click the "save" button.

(The operation effect is shown in Figure 3.2-1)

Figure 3.2-1 define a data source

3.3 Step 3: bind variables and actions

Bind the two data sources created in step 3.2 to the corresponding components and display the data after processing.

3.3.1 bind variable data sources

Procedure:

1. Click to select the single-line text component in the single-line text real-time verification form.
2. Click the {/} icon in the property bar-description information section on the right.

3. In the variable binding dialog box that appears, select the state.errMsg variable.
4. Click OK.

(The operation effect is shown in Figure 3.3-1)

Bind onchange actions (as shown in Figure 3.3-2).

Figure 3.3-1 bind a variable data source

3.3.2 bind onChange actions

Procedure:

1. Click to select the single-line text component in the single-line text real-time verification form.
2. Click the properties bar on the right-advanced-action settings-new action button.

3. Select the onChange value change option.
4. On the "onChange value changes" dialog Kang select "page JS-add new action" and name it "onChange".

5. Click OK.
6. Copy the following code to the pop-up page JS panel.

(The operation effect is shown in Figure 3.3-2)

Figure 3.3-2 binding onchange

The following code can be copied directly into the JS panel.Note: You need to change the unique identifier of the formUuid and drop-down options.

//注意：此处传了第二个参数e
export function onChange({ value },e) {
  if (value) {
    let fieldId = e.target.getAttribute("id"); //当前组件唯一标识
    //获取单行文本的值赋值给下拉单选，用下拉单选用做搜索条件精准校验
    //formUuid需要替换为当前表单的表单ID
    this.$("selectField_kuz8dunp").setValue(value);
    let params = {
      formUuid: "FORM-YI866S91CJMUJYWN4Z7JZ6E47HIO327L88ZUKF2",
      searchFieldJson: JSON.stringify({
        selectField_kuz8dunp: value
      })
    };
    //调用接口搜索当前表单数据，如果有返回值，赋值提示文字和颜色。如果没有提示文字赋值为空。
    this.dataSourceMap.getData.load(params).then(res => {
      if (res.totalCount != 0) {
        this.setState({
          errMsg: "该数据已存在，请重新填写！"
        });
        setTimeout(() => {
          //改变提示颜色
          document.querySelector(".mt-form-item-help span") ? 
          document.querySelector(`.${fieldId}>.mt-list-item-container>.mt-list-item-content>.mt-form-item-help span`).style.color = "red" : 
          document.querySelectorAll(`.${fieldId}>.next-form-item-control>.next-form-item-help`)[0].style.color = "red";
        }, 50);
      } else {
        this.setState({
          errMsg: ""
        });
      }
    });
  } else {
    this.$("selectField_kuz8dunp").reset();
  }
}

3.4 Step 4: page binding form before submission

Bind the form to the form and block the submission.

Procedure:

1. Click the blank of the single-line text real-time verification form and select the form.
2. Click the bind action button in the property bar on the right-advanced-before form submission.

3. In the "before form submission" dialog box that appears, select "page JS-add new action" and change the action name to "beforeSubmit".
4. Click OK.

5. Copy the following code to the displayed page JS panel.

(The operation effect is shown in Figure 3.4-1)

Figure 3.4-1 binding action

The following code can be copied directly into the JS panel.

export function beforeSubmit({ formDataMap }) {
  // 注意：目前不支持在这里修改提交数据
  // 判断如果有提示文字，阻断提交
  if (this.state.errMsg) {
    return false;
  }
}

4. Achieve results

Effect demonstration

YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!

Click this link to fill in the questionnaire

-------------------- Get the latest information YIDA, welcome to follow US--------------------