<view class="view-form">
<mp-form id="form" rules="{{rules}}" models="{{activityData}}">
<mp-cells>
<mp-cell prop="activityData.expenseType.name" link="{{globalDisbale}}" title="费用类型" value="{{activityData.expenseType.name}}" bindtap="{{globalDisbale ? 'findCostType':null}}" ext-class="">
</mp-cell>
</mp-cells>
</mp-form>
</view>
js部分
data: {
activityData:{},
rules: [{
name: 'activityData.expenseType.name',
rules: {
required: true,
message: '请选择'
},
}],}
提交表单部分
submitForm() {
console.log("赋值后,在submitForm中打印", this.data.activityData) // 有值
this.selectComponent('#form').validate((valid, errors) => {
if (!valid) {
console.log('valid', valid, errors) //有值 依然打印了错误
} else {
// 提交
}
})
},
按照上图的写法,无论是否设置数据,在提交时,都会触发validate((valid, errors) 的rules验证
请问使用weui Form表单做验证时,如何定义或者配置如上图这种对象嵌套对象的验证?
你好,可以通过配置data-field的方式实现,我的文章里面有类似例子。
我的问题并不是没有赋值到formData。我在赋值之后,依然触发了表单验证的错误接口;
如下图的逻辑
你好,可以私聊发我这一块的代码截图吗?
你把mp-cell放在mp-cells里面试试?
prop那里去掉activityData.试试?
再查看源码后,确认组件不支持嵌套对象下面子对象的属性验证;
目前想到的两张方案:
1、使用多个表单嵌套来对应多个对象;如下图的方式
2、获取到fromData的对象数据,直接在提交表单时,自己实现一套可以验证嵌套对象的方法效验表单
算是结贴了,给后面遇到此问题的兄弟们一些思路,如果有其他的,比较好的思路请在评论区回复讨论