跳到主要内容

表单中子表单常见场景的应用

1. 使用场景

本例介绍一下宜搭子表单在常见的场景中使用到的功能。

2. 实现功能

2.1. 子表单自定义校验

2.1.1. 配置表单页面

2.1.2. 将下述函数拷贝至页面 JS 中

// 出库数自定义校验(出库数不得大于库存数)
// numberField_lonxsiwh 为子表单内库存数字段的唯一标识,请按需修改
export function validateRuleForOutbound(value) {
const { values } = this.item;
const inventoryCount = values.numberField_lonxsiwh || 0; // 获取库存数
return value <= inventoryCount;
}

2.1.3. 配置出库数字段自定义校验

function validateRule(value) {
return this.validateRuleForOutbound(value);
}

2.2. 子表单动态设置校验

注意:此方式不会出现必填的 * 标记,但有实际效果。

2.2.1. 配置表单页面

2.2.2. 将下述函数拷贝至页面 JS 中

// 子表单动态设置校验(enableValid / disableValid)
export function onChange({ value }) {
if (value === '是') {
this.$('selectField_lonxsixa').enableValid();
} else {
this.$('selectField_lonxsixa').disableValid();
}
}

2.3. 子表单动态设置组件状态

2.3.1. 配置表单页面


注意:产品信息字段状态组件的下拉选项值当中的 VALUE 分别为 NORMAL 、READONLY 、DISABLED 、HIDDEN


2.3.2. 将下述函数拷贝至页面 JS 中

// 产品信息字段状态组件 onChange
export function onChange({ value }) {
this.$('selectField_lonxsiwo').setBehavior(value);
}

3. 实现效果

3.1. 子表单自定义校验

3.2. 子表单动态设置校验

3.3. 子表单动态设置组件状态

4. 在线试玩

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4