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?
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)
}