localMessages *and* localAttributes

Hi,

I’m trying to figure out how to have local attributes names like you can set globally as I want friendly message for attribute names:

        <form-group
          class="col-md-6"
          name="telephoneNumber" 
          label="Telephone Number"
          font-awesome="fas fa-phone fa-rotate-90 fa-fw"
        >
          <b-form-input
            slot-scope="{ attrs, listeners }"
            v-bind="attrs"
            v-model="form.telephoneNumber"
            v-on="listeners" 
          /> 
        </form-group>

FYI, I’ve also had to add a prop to get bootstrap vue to take a font awesome class as a <slot name="label" won’t work in the main form:

<template>
  <b-form-group
    :invalid-feedback="firstErrorMessage"
    :state="isValid"
  >
    <label><i :class="fontAwesome"/> {{ label }}</label>
    <slot
      :attrs="{ state: isValid }"
      :listeners="{ input: () => preferredValidator.$touch() }"
    />
  </b-form-group>
</template>
<script>
import { singleErrorExtractorMixin } from "vuelidate-error-extractor"

export default {
  name: "FormElement",
  extends: singleErrorExtractorMixin,
  props: {
    fontAwesome: {
      type: String,
      default: "fas fa-envelope fa-fw"
    }
  }
}
</script>

Here’s my src/main.js snippet:

/* Actual messages presented to the user. Move to separate file and use i18n later */
const messages = {
  required: "Your {attribute} is required",
  email: "This is not a proper email address",
  minLength: "Your new password is not long enough",
  passwordComplexity:
    "Your new password is not complex enough. Please see above.",
  sameAsNewPassword:
    "Your confirmation password is not the same as your new password."
}

Vue.use(VuelidateErrorExtractor, {
  messages,
  attributes: {
    name: "Name",
    email: "Email",
    text: "Text",
    oldPassword: "old password",
    newPassword: "new password",
    confirmPassword: "password confirmation"
  }
})

Any tips?

[dobromir-hristov]

@ghenry I was tweeking some things today and I remembered your issue. Why cant you use the attribute prop to pass an attribute per field? It has precedence over globally defined ones always.

[dobromir-hristov]

You want to be able to pass a set of local attributes per form-field? How is that easier than defining them globally, so you can re-use them?

You could overwrite resolvedAttribute computed property on your FormElement to check for a locally defined attributes prop.

https://github.com/dobromir-hristov/vuelidate-error-extractor/blob/master/src/single-error-extractor-mixin.js#L56-L58