Vee-validate: How to reset only a single value on this.$validator.reset() event?

[ivomarsan]

Versions:

• VueJs: 2.5.9
• Vee-Validate: 2.0.0-rc.25

Description:

I have a single input and I want to reset only this

<input v-model.trim="role.Name" name="roleName">

But doesn't works the code below

this.roleName.reset();

and I don't want reset all inputs with

this.$validator.reset();

Its possible actually?

[logaretm]

Currently no support for individual reset is available, I will tag this as an enhancement.

As a workaround you can loop over $validator.fields.items which are instances of Field class, you could then call reset on whatever field you need.

[ivomarsan]

So, I can do this

this.$validator.fields.items.forEach( each => {
  if (each.el.name === 'myInputName')
    // TO DO
})

But how can I call reset function?

[logaretm]

Call each.reset() and it should reset the flags and the classes, you would still need to remove the errors yourself though using validator.errors.remove.

You can also do this instead:

const matchOptions = {
  id: any, // if you have the id, otherwise its optional
  name: string, // optional
  scope: string // optional
};

const field = this.$validator.fields.find(matchOptions);
field.reset();
this.$validator.errors.remove(field.name, field.scope);

I know its not in the docs, We will fix that with the new docs. I just pushed an enhancement for this issue, should be up with the next release soon.

[yasomail]

To remove single or all inputs error message:
this.$validator.fields.items.forEach(input=>{
if (this.$validator.errors.has(input.name)){
const field = this.$validator.fields.find({name:input.name});
if (field){
this.$validator.errors.remove(input.name);
}
}
})

Just comment line with remove and do some console.log or debug to check a different values.

[Mikilll94]

Call each.reset() and it should reset the flags and the classes, you would still need to remove the errors yourself though using validator.errors.remove.

You can also do this instead:

const matchOptions = {
  id: any, // if you have the id, otherwise its optional
  name: string, // optional
  scope: string // optional
};

const field = this.$validator.fields.find(matchOptions);
field.reset();
this.$validator.errors.remove(field.name, field.scope);

I know its not in the docs, We will fix that with the new docs. I just pushed an enhancement for this issue, should be up with the next release soon.

So, is resetting a validation for a single field possible now?

[amrut07]

Hi below config worked for me.

const matchOptions = {
        //   // id: field.id, // if you have the id, otherwise its optional
          name: field.name, // optional
          scope: field.scope // optional
        }
        // required to check below condition as unnecessary validation functionality triggered even field has no errors!
        const errorField = _.find(this.$validator.errors.items, ['field', field.name]) ? this.$validator.fields.find(matchOptions) : false
        if (errorField) {
          `errorField.reset()`
          this.$validator.reset(errorField)
        }

By passing errorField in reset function reset that filed validation.