Step-1:
add v-bind:class = “{‘is-invalid’: validation_sensor}” v-model=“sensor” to input field as well need to erorr after the validation add
<b-form-invalid-feedback>
message
</b-form-invalid-feedback>
<template>
<!– Default form contact –>
<form>
<b-row>
<b-col cols=“12” xl=“12”>
<transition name=“slide”>
<b-card header-tag=“header”
footer-tag=“footer”>
<div slot=“header”>
<strong>Add Sensor</strong>
<router-link to=“/sensors”>
<button type=“button” class=“btn btn-primary” style=“float:right”>
Back
</button>
</router-link>
</div>
<div>
<!– Default input Sensor–>
<label for=“defaultFormContactNameEx” class=“grey-text”>Sensor</label>
<input type=“text” id=“defaultFormContactNameEx” v-bind:class = “{ ‘is-invalid’ : validation_sensor}” class=“form-control” v-model=“sensor”>
<b-form-invalid-feedback>
Please enter Sensor.
</b-form-invalid-feedback>
<br>
<div class=“text-center mt-4”>
<button class=“btn btn-outline-success” type=“submit” @click=“addModule()”>Submit<i class=“far fa-paper-plane ml-2”></i></button>
</div>
</div>
</b-card>
</transition>
</b-col>
</b-row>
</form>
<!– Default form contact –>
</template>
<script>
import axios from ‘axios’
import { URL } from ‘../../endpoints’
export default {
name: ‘forms’,
data () {
return {
validation_sensor:false,
sensor:”,
}
},
methods: {
addModule() {
if (this.sensor==”) {
this.validation_sensor=true;
}
else{
this.validation_sensor=false;
}
if(this.sensor){
let payload = {
sensor:this.sensor,
}
}
else{
mandatory: true;
return
}
axios.defaults.headers = {
Authorization: `Bearer ${localStorage.getItem(‘token’)}`,
‘Content-Type’: ‘application/json’,
};
axios.post( URL ,payload)
.then((response) => {
this.loading = true;
Swal.fire(
‘Successful’,
‘Sensor Added Successfully !’,
‘success’
);
this.$router.push(‘/sensors’);
}).catch((err) => {
this.resp_error=err.response.data
this.loading = false;
Swal.fire({
type: ‘error’,
title: ‘Oops…’,
text: ‘Please Add Correct Infomation’,
})
}).catch(err => {
if (err.response.status == 401) {
const commit = ‘logout’
this.$store.dispatch(‘logout’, { commit })
.then(() => this.$router.push(‘/’))
.catch(err => console.log(err))
}
console.log(err);
});
},
},
}
</script>
