Vee-Validate. Using flags on the field value returns undefined? Written with TypeScript

2
votes

https://baianat.github.io/vee-validate/guide/flags.html#introduction

According to the documentation, I should be able to get a boolean when using a flag on the value of one of the fields. Eg. 

computed: {
    isFormDirty() {
      return Object.keys(this.fields).some(key => this.fields[key].dirty);
    }
 },

I am trying to disable the submit button of my form until all fields are valid. My form is a bit long so I will keep it short. All the attributes of the inputs are structured like the following:

type="text", @change="updateForm", name="surname", v-validate="'required'", v-model="form.surname", id="surname". All the inputs are wrapped by a <form> tag.

The updateForm method looks like:

updateForm(event): void { this.$store.commit('updateForm', this.form) }

where the mutation 'updateForm' looks like:

updateForm(state, data) { state.form = data; },

The submit button looks like:

<button type="submit" :disabled="isFormValid">Submit</button>

where isFormValid is a computed property that looks like:

get isFormValid(): boolean { return Object.keys(this.form).some(key => this.form[key].invalid); }

The form data is also a computed property:

get form(): FormData { return this.$store.getters.getForm(); }

The problem is when I console.log(Object.keys(this.form).map(key => this.form[key]) or console.log(this.$validator.fields.items.map(item => item.value) inside isFormValid(), I am getting the values of the fields. However, when I attach an invalid flag after them, it shows undefined instead of the boolean I am expecting. Why is this?

2
typescriptvue.jsvee-validate

2 Answers

1
votes

I was having this problem and it was because this.$validator.fields were empty when the component was being rendered. If you use:

isFormDirty() {
  if (this.fields) {
    return Object.keys(this.fields).some(key => this.fields[key].dirty);
  }
  return;
}

It will work fine!

0
votes

I did a bit more research and playing around with the object being returned and figured out that the flags can only be accessed after .flags after $validator.fields.

I ended up getting an array with a boolean for all of my fields when I did console.log((this.$validator.fields).map(field => field.flags.invalid)).

my isFormValid() ended up looking like:

 get isFormValid(): boolean {
    const a = function(e) {
      return e === true;
    }
    return (this.$validator.fields).map(field => field.flags.invalid).some(a)
 }