Validations on collections with dynamic elements about vuelidate HOT 15 CLOSED

This is kind of the setup that is currently working for me:

<!-- I added the key binding for example's sake but it's working even if it's not added -->
<div v-for="(item, index) in items" v-bind:key="item.pseudoId"> 
    <input type="textfield" name="name" v-model="item.name">
    <span v-if="$v.items.$each[index].$error">Error</span>
    <button v-on:click="remove(index)">Remove</button>
</div>
<button v-on:click="add">Add</button>

{
  validations : {
    items : {
       $each : {
          $trackBy : 'pseudoId',
          name : {
              required :  VuelidateValidations.required
          }
       }
    }
  },
  methods : {
      add : function() {
          this.items.push({
              pseudoId : Math.random(),  // the function i'm using is actually more elaborated than this
              name : ''
          });
      },
      remove : function(index) {
          if (this.items.length === 1) {
              this.items.splice(0, 1, {
                  pseudoId : Math.random(),
                  name : ''
              });
          } else {
              this.items.splice(index, 1);
          }
      }
  }
}

from vuelidate.

@sesegura @jamesjieye Please check your issues against latest version.

from vuelidate.

This seems like a bug to me, I will need to test it more, but I think I might recognise it already.

It seems like you are referencing the object directly on array, but through the second parameter. It might be related to #51. While it is a bug (which might be fixed already, to be released), you probably can avoid it by simplifying your logic.

$each: {
    email :  {
        required : function(email, person) {
            return (person.firstName && email) || email;
        }
    }
}

This validator can be simplified to not reference multiple values at once. (A and B) or B means simply B.

$each: {
    email : { required }
}

I've noticed that even if i used the $trackBy option and "printed" the $v object, the key for each object in the collection still corresponds to the item's index in the array.

That's expected. $trackBy influences the validation state tracking, but original keys are still used as indices on validation object.

from vuelidate.

Hello @Frizi, thank you for the answer and for the validation advice, but unfortunately it's just part of what the issue is.

The real problem i think it's related to what you said previously about keeping track of changes in arrays and not recomputing the $each validator. At the end, the items left in the array aren't being validated.

Can you let me know if this could be fixed or if it's a known issue/limitation?

from vuelidate.

Please check it against current master. It contains said fix. I'm only waiting for $params feature to be finally finished and merged, then I'll do the release. If there is still a bug, it can also be fixed before that.

from vuelidate.

Checked with master. It's working now, but it needed a little bit of workaround.
What i did was generating a pseudo id property to each element and using $trackBy with that id. I said i tried that before and didn't work, but now it's working good

@Frizi Thanks a lot! You may close this issue if there aren't more questions/suggestions 😉

from vuelidate.

@sesegura Could you also try without any $trackBy? Default is to track by the key/array index, it should still work.

from vuelidate.

Already tried but didn't work either.
Also tried with v-bind:key="item.pseudoId and no $trackBy but no results.

from vuelidate.

Can you post the working example? It's a bug if it doesn't work by default.

Also key attribute on nodes doesn't change anything, vuelidate is not working with DOM in any way.

from vuelidate.

name : VuelidateValidations.required

This is odd. What you ment is probably

name: {
  required: VuelidateValidations.required
}

What you did should make the actual object required, which is always true. Actually weird it works, I have to test it.

from vuelidate.

Sorry, i wrote the previous code example from memory, the actual example has that structure with required being inside the name object.
I'll edit my previous comment for making that fix in the example.

from vuelidate.

@sesegura Thanks, that makes a lot of sense now 😄

from vuelidate.

I have a similar issue.

I use an array to hold a list of choices of a question. Each choice has an input field with v-model binding to the label property of the choice. And in the validation, the label is required.

I put a placeholder choice with empty label in the array for initial rendering. And when editing an existing question which has a list of choices, I use splice(0) to clean up the placeholder choice and then use push() to add the existing choices.

The validation of the first choice always fails, even after I edit the choice label using the input field. And it is fixed by printing the $v object.

Here is the code.

<li v-for="(choice, index) in question.choices" :index="index">
  <span class="fa fa-reorder drag-handler"></span>
  <input type="text" class="form-control input-sm label-input" v-model="choice.label">
  <span class="fa fa-plus-circle btn-choice add" @click="addChoice"></span>
  <span class="fa fa-minus-circle btn-choice remove" v-if="index !== 0" @click="removeChoice"></span>
  <p class="field-error" v-if="!$v.question.choices.$each[index].label.required && $v.question.choices.$each[index].label.$dirty">Blank choice is not allowed</p>
</li>

data () {
  return {
    question: {
      choices: []
    }
  }
},
created () {
  /* This is the part that I add the placeholder choice */
  this.question.choices.push({id: 0, label: '', sortOrder: 1})
},
validations: {
    question: {
      title: {
        required
      },
      type: {
        required
      },
      choices: {
        required,
        $each: {
          label: {
            required
          }
        }
      }
    }
  }

The hack I use is print out the first choice in the $v object.

<div class="hidden">{{ $v.question.choices.$each[0] }}</div>

from vuelidate.

Bug fixed for me :)

from vuelidate.

@Frizi I think it will be great to add $trackBy to the collection example in the docs because for now, it's pretty hard to find it.
Actually, I found it in this issue, but not in the docs :)

#371 Here someone had troubles realizing $trackBy exists too

from vuelidate.