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