CODEWITHSUNDEEP
vue.jsvuelidate
Funkel
Funkel

Reputation: 183

Unable to validate email on each email Value field in an array of objects

I'm trying to validate the the value field in an object contains an email. There could be potentially many of these objects in an array. When I evaluate if it's $dirty it says Value is undefined. The validation is also not working at all. I've never validated an array of objects before as assuming I'm accessing the data in the array wrong but I'm not sure

Example Object: Value will contain the email I'm trying to validate

{
   option: null,
   Value: null,
   Environment: null
}

Validations:

validations: {
    defaultFields: {
      $each: {
        Value: { email }
      }
    },
  }

Custom Error Function: This is whats throwing the error on the first If statement but the validation isn't working either way

computed: {
  emailErrors() {
      const errors = [];
      if (!this.$v.defaultFields.$each.Value.$dirty) return errors;
      !this.$v.defaultFields.$each.Value.email && errors.push('You must enter a valid email');
      return errors;
    }
}

This is an example of the loop and the field in the loop i'm trying to iterate over and validate what is typed in is a valid email.

<v-form>
    <div v-for="(defaultField, defaultIndex) in defaultFields" v-bind:key="`${defaultIndex}-default`">
        <v-text-field
        @input="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        @blur="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        :error-messages="emailErrors(defaultIndex)"
        id="value"
        v-model="defaultField.Value"
        label="Email Address"
        type="email"
        ></v-text-field>
    </div>
</v-form>

Upvotes: 0

Views: 600

Answers (2)

Jubayer Ahmed
Jubayer Ahmed

Reputation: 81

i was trying out Funkel method of doing it. but it doesn't work. but if you write this email erros method like below it works fine. everything is allright except the emailErrors method.

 methods: {
  emailErrors(defaultIndex) {
     const errors = [];
     if (!this.$v.defaultFields.$each[defaultIndex].Value.$dirty) return errors;
     !this.$v.defaultFields.$each[defaultIndex].Value.email && errors.push('You must enter a valid email');
  return errors;
}

}

Upvotes: 1

Funkel
Funkel

Reputation: 183

So I was able to figure this out. My method that was receiving defaultIndex

:error-messages="emailErrors(defaultIndex)"

Was located in the computed life cycle hook. After moving this to methods life cycle hook I was able to pass in the index and it corrected the error

<v-form>
    <div v-for="(defaultField, defaultIndex) in defaultFields" v-bind:key="`${defaultIndex}-default`">
        <v-text-field
        @input="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        @blur="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        :error-messages="emailErrors(defaultIndex)"
        id="value"
        v-model="defaultField.Value"
        label="Email Address"
        type="email"
        ></v-text-field>
    </div>
</v-form>


methods: {
  emailErrors() {
      const errors = [];
      if (!this.$v.defaultFields.$each.Value.$dirty) return errors;
      !this.$v.defaultFields.$each.Value.email && errors.push('You must enter a valid email');
      return errors;
    }
}

Upvotes: 0

Related Questions