uniapp 使用 Uview 前端框架，如何动态生成表单以及效验

[Arthit]

Uview 官网也没有例子。 百度，goggle 都搜过了。 求助大佬们，给个 demo 地址吧。我一个后端开发太难了

[nitmali]

根据表单元素的类型分装好进行条件渲染。

[nitmali]

@nitmali #1 分装->封装，看看插件市场有没有做好的，没有只能自己封装了。

[BwNVlwSq]

sync-validator 能用吗，挺多用这个做校验的

[BwNVlwSq]

async-validator ，打错了...

[Arthit]

@nitmali 其实我已经把表单渲染出来了， 就是效验规则一直有问题。我明明输入了值，效验不过去。

[Arthit]

贴部分代码，大佬们帮我看看把

怀疑我的 html 写的不对

```
<u-form ref="formRef" :model="dynamicForm" label-align='left' :error-type="['border-bottom']">
<u-form-item v-for="(item,index) in dynamicForm.formItemList" :key="index" :label="item.label +' :'"
:prop="dynamicForm.formItemList[index].prop" label-width='auto' :required="item.required">
<u-input v-if="item.el===0" v-model="item.defaultValue" placeholder="请输入" />
<u-keyboard v-else-if="item.el===2" v-model="item.defaultValue"></u-keyboard>
<u-calendar v-else-if="item.el===3" v-model="item.defaultValue"></u-calendar>
<u-input v-if="item.el===4" v-model="dynamicForm.formItemList[index].defaultKey" type="select" placeholder="请选择"
@click="onOpenSelect(item)" />
<view v-else-if="item.el===9">{{item.defaultValue}}</view>
</u-form-item>
</u-form>
```

```
const dynamicForm = reactive<{
formItemList : FormColumnProps[],
}>({
formItemList: [],
})
```

```
onReady(() => {
formRef.value.setRules(rules);
});
```

[nitmali]

dynamicForm.formItemList 是异步获取的吧，赋值后 写一个
this.$nextTick(() => {
this.$refs.formRef.setRules(rules);
})