I am currently learning vuejs with asp .net core right now. I am doing some form validation and adding some error messages.
The error messages are from the Server side here is my sample code:
[HttpPost]
public async Task<IActionResult> AddUser([FromBody] UserModel user)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (_context.Users.Any(u => u.UserName == user.UserName))
{
ModelState.AddModelError("UserName", "Username is already in used");
return BadRequest(ModelState);
}
try
{
var userDto = new User
{
FirstName = user.FirstName,
LastName = user.LastName,
Password = user.Password,
UserName = user.UserName
};
_context.Users.Add(userDto);
await _context.SaveChangesAsync();
}
catch(Exception e)
{
ModelState.AddModelError("Saving Error", string.Format("Error in saving user. \nDetails:\n {0}", e.Message));
return BadRequest(ModelState);
}
return Ok();
}
And in the view:
<form v-on:submit.prevent="SaveUser()">
<div class="form-group">
<label for="userName">User Name</label>
<input class="form-control" type="text" id="userName" placeholder="Username" v-model="userName" required :disabled="isEditMode" />
</div>
<div class="form-group">
<label for="userName">First Name</label>
<input class="form-control" type="text" id="firstName" placeholder="First Name" v-model="firstName" required />
</div>
<div class="form-group">
<label for="userName">Last Name</label>
<input class="form-control" type="text" id="lastName" placeholder="Lastname" v-model="lastName" required />
</div>
<div v-if="!isEditMode">
<div class="form-group">
<label for="userName">Password</label>
<input class="form-control" type="password" id="password" placeholder="Password" v-model="password" required />
</div>
</div>
<!--TODO: Distribute to each control-->
<div v-if="hasError">
<ul v-for="error in errors">
<li style="color: red;" v-for="detail in error">{{detail}}</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" @click="backToList()" class="btn btn-danger">Cancel</button>
</form>
Basically I am doing the validations from the server-side. Currently the error messages are displayed below the controls And I need to distribute all the error message inline with the inputs. Can you help me with this?
Thanks in advance.
To display the error messages inline with the inputs, you'll need to bind each error message to the corresponding input field. One way to do this is to create a computed property in your Vue component that returns an object with keys that correspond to the input field names and values that correspond to the error messages.
Here's an example of how you could do this:
computed: { errors() { let errors = {} for (let key in this.serverErrors) { errors[key] = this.serverErrors[key][0] } return errors } }You'll also need to modify your template to bind the error messages to the corresponding input fields. Here's an example of how you could do this:
<template><form v-on:submit.prevent="SaveUser()"><div class="form-group"><label for="userName">User Name</label><input class="form-control" type="text" id="userName" placeholder="Username" v-model="userName" required :disabled="isEditMode" /><span v-if="errors.userName" class="error">{{ errors.userName }}</span></div><div class="form-group"><label for="userName">First Name</label><input class="form-control" type="text" id="firstName" placeholder="First Name" v-model="firstName" required /><span v-if="errors.firstName" class="error">{{ errors.firstName }}</span></div><div class="form-group"><label for="userName">Last Name</label><input class="form-control" type="text" id="lastName" placeholder="Lastname" v-model="lastName" required /><span v-if="errors.lastName" class="error">{{ errors.lastName }}</span></div><div v-if="!isEditMode"><div class="form-group"><label for="userName">Password</label><input class="form-control" type="password" id="password" placeholder="Password" v-model="password" required /><span v-if="errors.password" class="error">{{ errors.password }}</span></div></div><!--TODO: Distribute to each control--><div v-if="hasError"><ul v-for="error in errors"><li style="color: red;" v-for="detail in error">{{detail}}</li></ul></div><button type="submit" class="btn btn-primary">Save</button><button type="button" @click="backToList()" class="btn btn-danger">Cancel</button></form></template>