0👍
I found my mistakes. First, I need to add the name attribute to both of my inputs. Second, I removed my single quotation marks from delete this.errors['field']
which should be this.errors[field]
Updated code:
<template>
<div>
<b-form @submit="onSubmit" @reset="onReset" v-if="show" @keydown="errors.clear($event.target.name)">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
name="email"
></b-form-input>
<span class="help is-danger" v-if="errors.has('email')" v-text="errors.get('email')"></span>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
name="name"
></b-form-input>
<span class="help is-danger" v-if="errors.has('name')" v-text="errors.get('name')"></span>
</b-form-group>
<b-button type="submit" variant="primary" :disabled="errors.any()">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
class Errors {
constructor() {
this.errors = {};
}
has(field) {
return this.errors.hasOwnProperty(field);
}
any() {
return Object.keys(this.errors).length > 0;
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
return this.errors = errors;
}
clear(field) {
console.log('message: ' + field); //<-- executed with a blank message
delete this.errors[field]; //<-- not sure if this is working as expected
}
}
export default {
components: {
},
data() {
return {
form: {
email: '',
name: '',
},
show: true,
errors: new Errors(),
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
var self = this
axios.post('/employees', {
name: this.form.name,
email: this.form.email,
})
.then(response => {
evt.target.reset();
// Trick to show form after form reset
self.show = true;
})
.catch(error => {
//self.errors = error.response.data.errors.email[0];
this.errors.record(error.response.data.errors);
console.log(error.response.data.errors);
});
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.email = ''
this.form.name = ''
// Trick to reset/clear native browser form validation state
this.show = true
},
},
}
</script>
Source:stackexchange.com