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>{{ }}</td>
          <td>{{ emp.gender }}</td>
          <td>{{ emp.department }}</td>
          <td>{{ }}</td>

//creating form controls using reactive forms
this.employeeForm ={
          employeeId: 0,
          name: ['', [Validators.required,
          gender: ['', [Validators.required]],
          department: ['', [
          city: ['', [

    <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>
 <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}}>

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 });