balmjs / balm-ui

:diamonds: A modular and customizable UI library based on Material Design and Vue
https://material.balmjs.com
MIT License
505 stars 31 forks source link

Error when validate a custom form #124

Open jfrag opened 2 years ago

jfrag commented 2 years ago

Hi,

I just updated BamUI for a project (from 9.x to 10.x). I have an error when i use the validator plugin.

export default {
  data() {
    return {
      formValidation: {
        validMsg: {},
        validator: useValidator(),
        login: {
          username: {
            label: "Identifiant",
            validator:'required',
          },
          pwd: {
            label: "Mot de passe",
            validator:'required',
          }
        }
      },
      signIn: {
        username: null,
        pwd: null
      }
    }
  },
  methods: {
    login() {
      this.formValidation.validator.set(this.formValidation.login);
      let {valid, validMsg} = this.formValidation.validator.validate(this.signIn);
      this.formValidation.validMsg = validMsg;

      if (valid) {
        signInWithEmailAndPassword(auth, this.signIn.username, this.signIn.pwd).then(() => {
          this.$router.push('/')
        }).catch(err => {
          this.$toast(err.message);
        })
      }
    }
  }
}
Uncaught TypeError: Cannot set property openBlock of #<Object> which has only a gette

i don't have the error when i remove the custom validations

elf-mouse commented 2 years ago

Hi @jfrag , recommend you to upgrade to 10.8.x

export default {
  data() {
    return {
      formValidation: {
        validMsg: {},
        // new verifications definition since 10.8.0
        login: [
          {
            key: 'username',
            label: 'Identifiant',
            validator: 'required'
          },
          {
            key: 'pwd',
            label: 'Mot de passe',
            validator: 'required'
          }
        ]
      },
      signIn: {
        username: '',
        pwd: ''
      }
    };
  },
  methods: {
    login() {
      this.$validator.set(this.formValidation.login);
      let { valid, validMsg } = this.$validator.validate(this.signIn);
      this.formValidation.validMsg = validMsg;

      if (valid) {
        // your code
      }
    }
  }
};