In Laravel 12 / vuejs 3 app I use modal form with validation in edit and insert mode.
Problem is that when user clicks on edit button to open the model form and close it (even without editing/saving it)
and next click on add button to create a new item the modal form is opened with 2 validation error messages(Not required)
Code for add button is in vue file :
<el-button type="primary" @click="openEdit(newModel, form)">Add Item</el-button>
export default {
components: {RegionCreateDialog, ModelTable},
mixins: [model],
data() {
return {
...
newModel: {
locations: [],
location_id: null,
}
}
},
Method openEdit is in common.js file, which methods are used in many editors:
methods: {
openEdit(model, theForm) {
console.log('openEdit model::', model)
console.log('openEdit theForm::', theForm)
// if (model) {
this.form = { ...model };
// }
if (theForm) {
theForm.errors = {}; // No errors - but I still have validation error messages
// If to uncomment line below I got error : Uncaught TypeError: Cannot read properties of undefined (reading 'clean')
// theForm.$validator.clean();
// If to uncomment line below I got error : Uncaught TypeError: theForm.errors.clear is not a function
// theForm.errors.clear();
const initialState = {
locations: [],
location_id: null,
}
Object.assign(theForm, initialState); // No errors - but I still have validation error messages
console.log('CLEARING ::')
}
this.showEditForm = true;
},
...
}
I try to pass new model with empty values newModel and the form form and try to clear validation error messages - but no methods working, some raises
errors (I show in the code above)...
How to clear them correctly ?