Angular : How to map angular reative formcontrols with entity properties of Web API
I am working on an angular project where I am using Web API for db operations.
As my entity properties have first letter capital but when I request data using angular service its giving me data in small letters only. And to map that I also used small letters for my form-controls as well as to display data in table.
But when I post data to API as I am using small letters its not mapping the entity, for example entity property is EmployeeId but I am posting employeeId.
Note Here I am posting data in form of FormData from angular and mapping entity using HttpContext.Request.Form.Keys.
How to post form-controls so that they can be mapped with entity properties?
Entity :
public partial class TblEmployee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Department { get; set; }
public string Gender { get; set; }
}
Component :
//to show data in table
<tr *ngFor="let emp of this.empdata">
<td>{{ emp.employeeId }}</td>
<td>{{ emp.name }}</td>
<td>{{ emp.gender }}</td>
<td>{{ emp.department }}</td>
<td>{{ emp.city }}</td>
</tr>
//creating form controls using reactive forms
this.employeeForm = this._fb.group({
employeeId: 0,
name: ['', [Validators.required,
Validators.minLength(3)]],
gender: ['', [Validators.required]],
department: ['', [
Validators.required
]],
city: ['', [
Validators.required
]]
});
<input class="form-control" type="text" formControlName="name">
<select class="form-control" data-val="true" formControlName="gender">
<option value="">-- Select Gender --</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<input class="form-control" type="text" formControlName="department">
<select class="form-control" data-val="true" formControlName="city">
<option value="">--Select City--</option>
<option *ngFor="let city of cityList" value={{city.cityId}}>
{{city.cityName}}
</option>
</select>
API call :
public int Create()
{
TblEmployee employee = new TblEmployee();
Dictionary<String, Object> _formvalue = new Dictionary<String, Object>();
var aaa = HttpContext.Request.Form;
foreach (string key in HttpContext.Request.Form.Keys)
{
_formvalue.Add(key, HttpContext.Request.Form[key]);
}
foreach (string key in HttpContext.Request.Form.Keys)
{
var propertyInfo = typeof(TblEmployee).GetProperty(key); // getting propertyInfo null here becoz posted values are in small letters.
}
}
1 answer
-
answered 2018-07-12 06:44
AbolfazlR
you have to apply the following config in your startup class to change camelCase (JSON properties are camelCased by default)
services.AddMvc () .AddJsonOptions(opt => opt.SerializerSettings.ContractResolver = new DefaultContractResolver ());in your angular project after getting the response to map you should apply
(<FormGroup>this.employeeForm).setValue(response, { onlySelf: true });