Dotnet core web API is getting Null data from angular form

Question

I have created dotnet core Web Api of CRUD operations, I tested it with postman and works fine, Then I implemented an angular form interface to get the data and passes it to the web Api. But I noticed that I am getting a record with null values, after that the web api won't work even with postman. works only when I delete the null record created by angular.

This is the method class

export class AddCustomerComponent implements OnInit {

  addCustomerForm: FormGroup;

  constructor(private service: CustomerService, private fb: FormBuilder, private router: Router) {}

  ngOnInit(): void {

    this.addCustomerForm = this.fb.group({

  VersionId : [null, Validators.required],

  Name : [null, Validators.required],

  Url : [null, Validators.required],

  Dns : [null, Validators.required],

    })
  }
  onSubmit(){
    this.service.addCustomer(this.addCustomerForm.value).subscribe(data => {
      this.router.navigate(["/customers"]);
    })
  }

}

.Net Core api Controller

[HttpPost("AddCustomer")]
        public IActionResult AddCustomer([FromBody]Customer customer)
        {
            if (!ModelState.IsValid) return BadRequest(ModelState);
            using (var context = new HrmapsMasterContext())
            {
                context.Customer.Add(customer);
                context.SaveChanges();
                return Ok();

            }
        }

Form code:

<div class="add-customer">
    <form [formGroup]="addCustomerForm" (ngSubmit)="onSubmit()">

        <div class="form-group">
            <label for="versionid" class="required">Id</label>
            <input type="number" class="form-control" id="versionId" formComtrolName="versionId" placeholder="Version Id ">
        </div>
        <div class="form-group">
            <label for="name" class="required">HR Portail</label>
            <input type="text" class="form-control" id="name" formComtrolName="name" placeholder="Url">
        </div>
        <div class="form-group">
            <label for="url" class="required">Job Portail</label>
            <input type="text" class="form-control" id="url" formComtrolName="url" placeholder="Url">
        </div>
        <div class="form-group">
            <label for="dns" class="required">DNS</label>
            <input type="text" class="form-control" id="dns" formComtrolName="dns" placeholder="dns">
        </div>



        <button class="btn btn-success" type="submit">Add</button>
        <button class="btn btn-default" [routerLink]="['/customers']">Cancel</button>

    </form>
    </div>

Here's my angular service code:

    export class CustomerService {

    _baseURL: string = "api/customers"

    constructor(private http: HttpClient) { }
    getAllCustomers(){
      return this.http.get<customer[]>(this._baseURL+"/getcustomers");

    }
    addCustomer(Customer: customer){


      const customerForAPI = {

        VersionId: Customer.VersionId,
        Name: Customer.Name,
        Url: Customer.Url,
        Dns: Customer.Dns

      };


      const body = JSON.stringify(customerForAPI);
      console.log(body);

      return this.http.post<customer>(this._baseURL +'/addcustomer/', body, { headers });

    }
  }

and here's my web api customer model, please notice that I have used Entityframeworkcore the reverse engineer an existing database

    public partial class Customer
    {
        public Customer()
        {
            Pack = new HashSet<Pack>();
        }

        public int Id { get; set; }
        public int? VersionId { get; set; }
        public string Website { get; set; }
        public string Twitter { get; set; }
        public string Map { get; set; }
        public string Fax { get; set; }
        public string Name { get; set; }
        public string Ceoname { get; set; }
        public string Activity { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string City { get; set; }
        public string Url { get; set; }
        public string Locality { get; set; }
        public string Street { get; set; }
        public string Town { get; set; }
        public string ZipCode { get; set; }
        public string ConnectionString { get; set; }
        public string Dns { get; set; }
        public bool? IsActive { get; set; }
        public bool? IsDeleted { get; set; }
        public DateTime? LicenseStartDate { get; set; }
        public DateTime? LicenseEndDate { get; set; }
        public Guid? GuidCustomer { get; set; }

        public virtual AppVersion Version { get; set; }
        public virtual ICollection<Pack> Pack { get; set; }
    }
}

here an xml post request works fine with postman

{ "id": 2078, "versionId": null, "website": null, "twitter": null, "map": null, "fax": null, "name": null, "ceoname": null, "activity": null, "email": null, "phone": null, "city": null, "url": null, "locality": null, "street": null, "town": null, "zipCode": null, "connectionString": null, "dns": null, "isActive": false, "isDeleted": null, "licenseStartDate": null, "licenseEndDate": null, "guidCustomer": null, "version": null, "pack": [] }

Answer 1

You could try:

const headers: HttpHeaders = new HttpHeaders()
  .set('Content-Type', 'application/json');

export class CustomerService {
.
.
.
addCustomer(customer: Customer) {
    const customerForAPI = {
      // Here your customerForAPI has to correspond to your C# customer class
      VersionId: customer.versionId,
      Name: customer.name,
      Url: customer.url,
      Dns: customer.dns
    };
    const body = JSON.stringify(customerForAPI);
    console.log(body);
    return this.http.post<Customer>(this._baseURL +'/addcustomer/', body, { headers });
  }

Answer 2

我错过了拼写 formControlName