极客观点
项目管理
HarmonyOS
1. 问题描述
本人使用 iview-admin 模板做一个管理系统，当编辑列表数据的时候异步加载数据到表单中显示，但是在初次校验的时候不正确，具体问题如下:
- 如我校验 age 字段, 在页面开始加载的时候该字段没有数据，配置了 {required : true ...}, 但是异步加载出来的数据 age 有值，比如为 20, 但是此时如果我直接调用 form.validate 方法会报错，显示的的该字段必填，重新填写 age 之后校验正常。
- age 配置了, {type: 'integer', min: 1, max: 100, ...}, 但是校验到这里的时候总是不通过，不知道是什么原因，网上搜到 elementUI + async-validator 校验 number 类型字段的时候也回存在类似的问题，是通过 <el-input v-model-number="age"...> 解决的， 但是我尝试了，并没有解决上述的问题。
2. 截图
2. 代码
// 用户信息编辑代码
<style lang="less">
@import '~@/styles/common.less';
@import '~@/styles/form.less';
</style>
<template>
<div class="form-container">
<Row>
<Col span="24" class-name="back-col">
<router-link :to="{ name: 'system-user'}" replace>
<Icon type="arrow-left-c" size="25"></Icon>
</router-link>
</Col>
</Row>
<Row>
<Col span="24">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="用户名" prop="username">
<Input type="text" v-model="formValidate.username" disabled/>
</FormItem>
<FormItem label="昵称" prop="nickname">
<Input type="text" v-model="formValidate.nickname"/>
</FormItem>
<FormItem label="性别" prop="gender">
<RadioGroup v-model="formValidate.gender">
<Radio label="1">男</Radio>
<Radio label="0">女</Radio>
</RadioGroup>
</FormItem>
<formItem label="年龄" prop="age">
<Input type="text" v-model="formValidate.age"/>
</formItem>
<formItem label="邮箱" prop="email">
<Input type="text" v-model="formValidate.email"/>
</formItem>
<FormItem label="简介" prop="remarks">
<Input v-model="formValidate.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="用户简介信息"/>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')" :loading="submitIsLoading">保存</Button>
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
</FormItem>
</Form>
</Col>
</Row>
</div>
</template>
<script>
import util from '@/libs/util';
export default {
data () {
return {
userId : this.$route.params.id,
submitIsLoading : false,
formValidate: {
username : '',
nickname : '',
gender: '',
age : '',
email : '',
remarks: ''
},
ruleValidate: {
nickname : [
{ required: true, message: '昵称必填', trigger: 'blur' }
],
gender: [
{
validator(rule, value, callback, source, options) {
console.log('开始校验...');
callback();
}
},
{ required: true, message: '请选择性别', trigger: 'blur' },
],
age : [
{required: true, message: '年龄必填', trigger: 'blur'},
{type: 'number', min : 1, max : 100, message: '年龄必须为整数，范围在 1 ~ 100 之间', trigger: 'blur'}
],
email : [
{required: true, message: '邮箱必填', trigger: 'blur'},
{type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
],
remarks : [
{type : 'string', min : 1, max : 200, message : '描述信息的长度限制在 1 ~ 200 个字符之间', trigger : 'blur'}
]
}
}
},
mounted() {
// 页面加载完成之后从服务器端加载当前编辑的用户的数据.
util.ajax
.get('/users/' + this.userId)
.then(r => {
if(r.isOk()) {
// 拿到数据之后更新表单中的数据。
this.updateForm(r.getAttr('user'));
}
});
},
methods: {
updateForm(user) {
this.formValidate.username = user.username;
this.formValidate.nickname = user.nickname;
this.formValidate.gender = user.gender;
this.formValidate.age = user.age;
this.formValidate.email = user.email;
this.formValidate.remarks = user.remarks;
},
// 提交表单数据，如果初始化完成之后直接提交，就会存在问题1、问题2中描述的问题。
handleSubmit (name) {
this.$refs[name].validate((valid) => {
return;
if (valid) {
console.log('开始提交表单数据...');
this.submitIsLoading = true;
util.ajax.post('/users', {
username : this.formValidate.username,
gender : this.formValidate.gender,
remarks : this.formValidate.remarks
}).then(r => {
if(r.isOk()) {
this.$Message.success('修改成功!');
}
this.submitIsLoading = false;
})
}
});
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>哪位遇见过这种问题，跪求解决办法！！！
显示编辑弹框的时候先调用下 resetFields 试试