在el-form中加入了表单验证为必填字段，但在表单为空的时候点击保存按钮,底下报错Cannot read property 'validate' of undefined"

<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;
    }
  });
},
  

具体是什么原因，需要怎么解决