added a required field for form validation in el-form, but click the save button when the form is empty, and the error Cannot read property "validate" of undefined "
is reported below.<el-dialog title="" :visible.sync="dialogAdd" width="30%">
<el-form label-position="right" ref="roleAdd" label-width="80px" :model="roleAdd" :rules="addRules">
<el-form-item label="" prop="RoleName">
<el-input v-model="roleAdd.RoleName" placeholder=""></el-input>
</el-form-item>
<el-form-item label="">
<el-input v-model="roleAdd.RoleRemark" type="textarea"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="create(roleAdd)"> </el-button>
<el-button @click="dialogAdd = false"> </el-button>
</span>
</el-dialog>
addRules: {
RoleName: [
{ required: true, message: "", trigger: "blur" },
],
},
create(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const param = {
PKID: 0,
RoleName: this.roleAdd.RoleName,
RoleRemark: this.roleAdd.RoleRemark
};
api.addRoleInfo(param).then(response => {
if (response.data.Success) {
this.$notify({
title: "",
message: "",
type: "success",
duration: 2000
});
this.dialogShow = false;
this.getList();
} else {
this.$notify({
title: "",
message: response.data.Message,
type: "error",
duration: 2000
});
}
});
this.getList();
} else {
return false;
}
});
},
what is the reason and how to solve it