Do tnet core web API получает нулевые данные из angular формы

Question

Я создал до tnet ядро ​​Web Api операций CRUD, я протестировал его с почтальоном и работает нормально. Затем я реализовал интерфейс формы angular для получения данных и передачи их в веб-API. Но я заметил, что получаю запись с нулевыми значениями, после этого веб-API не будет работать даже с почтальоном. работает только при удалении пустой записи, созданной angular.

Это метод класса

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

            }
        }

Код формы:

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

Вот мой angular сервисный код:

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

    }
  }

и вот моя модель клиента web api, обратите внимание, что я использовал Entityframeworkcore для обратного проектирования существующей базы данных

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

здесь xml почтовый запрос отлично работает с почтальоном

{"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

Я пропустил записанное имя формы ControlName

Answer 2

Вы можете попробовать:

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