title: Angular : How to map angular reative formcontrols with entity properties of Web API
body: <p>I am working on an angular project where I am using Web API for db operations.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>Note</strong> Here I am posting data in form of FormData from angular and mapping entity using HttpContext.Request.Form.Keys.</p>
  
  <p>How to post form-controls so that they can be mapped with entity properties?</p>
  
  <p><strong>Entity :</strong>    </p>
  
  <pre><code> 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; }           
          }   
  </code></pre>
  
  <p><strong>Component :</strong></p>
  
  <pre><code>//to show data in table
  &lt;tr *ngFor="let emp of this.empdata"&gt;
            &lt;td&gt;{{ emp.employeeId }}&lt;/td&gt;
            &lt;td&gt;{{ emp.name }}&lt;/td&gt;
            &lt;td&gt;{{ emp.gender }}&lt;/td&gt;
            &lt;td&gt;{{ emp.department }}&lt;/td&gt;
            &lt;td&gt;{{ emp.city }}&lt;/td&gt;
      &lt;/tr&gt; 
  
  //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
            ]]
  });  
  
      &lt;input class="form-control" type="text" formControlName="name"&gt;
       &lt;select class="form-control" data-val="true" formControlName="gender"&gt;
                &lt;option value=""&gt;-- Select Gender --&lt;/option&gt;
                &lt;option value="Male"&gt;Male&lt;/option&gt;
                &lt;option value="Female"&gt;Female&lt;/option&gt;
              &lt;/select&gt;
   &lt;input class="form-control" type="text" formControlName="department"&gt;
  &lt;select class="form-control" data-val="true" formControlName="city"&gt;
            &lt;option value=""&gt;--Select City--&lt;/option&gt;
            &lt;option *ngFor="let city of cityList" value={{city.cityId}}&gt;
              {{city.cityName}}
            &lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p><strong>API call :</strong></p>
  
  <pre><code>public int Create()
          {
              TblEmployee employee = new TblEmployee();
  
              Dictionary&lt;String, Object&gt; _formvalue = new Dictionary&lt;String, Object&gt;();
              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.
              }
  }
  </code></pre>