Угловой 7, POST для .NET Core Web API отправка NULL

Question

Я пытаюсь HTTP POST из формы углового шаблона в мой веб-API в .NET Core 2.0.Он отправляет без ошибок, но данные в SQL имеют все значения NULL (?).В Angular интерфейсе нет модели (только в .NET), но объект var "newRetireObject" соответствует SQL.

Вот здесь component.HTML ...

    <form #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)">
    <div class="container">

      <div class="form-group">
        <label for="create-date">Create Date</label>
        <input type="text" id="create-date" name="create-date" ngModel #RetireCalculatorCreateDate="ngModel" class="form-control" />
    </div>

    <div class="form-group">
        <label for="retireSet">Set Date</label>
        <input type="datetime-local" id="retireSet" name="retireSet" ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
    </div>

    <div class="form-group">
        <label for="staffID">Staff ID</label>
        <input type="text" id="staffID" name="staffID" ngModel #RetireCalculatorStaffID="ngModel" class="form-control" />
    </div>

    <div>
            <button type="button" class="btn btn-success" (click)="daysForty()">Generate 1</button>       
            <input type="text" class="text-field w-input" name="fortyDaysDate" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel" [(ngModel)]="fortyDaysDate" />

    </div>

    <button type="submit" class="btn btn-success">Submit</button>

    </div>

    </form>

Вот это component.ts ...

   import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
    import { CalculatorService } from '../calculator.service';
    import { add, subtract } from 'add-subtract-date';
    import { NgForm, FormGroup } from '@angular/forms';


    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {

        RetireCalculatorCreateDate: any;

     /* tried adding these, did not help   
     RetireCalculatorSetDate: any;
        RetireCalculatorDay45: any;
        RetireCalculatorDay60: any;
        RetireCalculatorDay90: any;
        RetireCalculatorStaffID: any; */




      public fortyDaysDate: any;

      constructor(private calculatorService: CalculatorService) { 
      }

      ngOnInit() {
        this.RetireCalculatorCreateDate = new Date();

      }

    //Generate date
    public daysForty(): any {
      const d: Date = new Date();
      const fortyDaysBack = subtract(d, 45, "days");

     this.fortyDaysDate = fortyDaysBack;
      console.log('d is ' + d)
      console.log('45 is ' + this.fortyDaysDate)
    }

      onSubmit(form: NgForm) {
        var retireDates = form.value;
        var newRetireObject = {
          RetireCalculatorCreateDate: retireDates.RetireRecord,
          RetireCalculatorSetDate: retireDates.RetireCalculatorSetDate,
          RetireCalculatorDay45: retireDates.RetireCalculatorDay45,
          RetireCalculatorDay60: retireDates.RetireCalculatorDay60,
          RetireCalculatorDay90: retireDates.RetireCalculatorDay90,
          RetireCalculatorStaffID: retireDates.RetireCalculatorStaffID,
        }
        this.calculatorService.add(newRetireObject).subscribe
    (data => {console.log('sent ' + data)})
      }

    }

Вот это service.ts ....

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable(

  )

export class CalculatorService {
  private headers: HttpHeaders;
  private accessPointUrl: string = 'http://localhost:52745/api/RetireCalculatorForms';


  constructor(private http: HttpClient) {
    this.headers = new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'});
   }

  public get() {

    return this.http.get(this.accessPointUrl, {headers: this.headers});
  }

  public add(payload) {
    return this.http.post(this.accessPointUrl, payload, {headers: this.headers});
  }

  public remove(payload) {
    return this.http.delete(this.accessPointUrl + '/' + payload.id, {headers: this.headers});
  }

  public update(payload) {
    return this.http.put(this.accessPointUrl + '/' + payload.id, payload, {headers: this.headers});
  }



}

Answer 1

Вот сделка. Поскольку вы используете подход управляемых шаблонами форм, вам придется добавить атрибут name к каждому input в вашей форме.

Как только вы это сделаете, это будет доступно как поле в form.value.

Итак, значение этой формы:

<form #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)">
  <div class="container">

    <div class="form-group">
      <label for="create-date">Create Date</label>
      <input type="text" id="create-date" name="RetireRecord" ngModel #RetireCalculatorCreateDate="ngModel" class="form-control" />
    </div>

    <div class="form-group">
      <label for="retireSet">Set Date</label>
      <input type="datetime-local" id="retireSet" name="RetireCalculatorSetDate" ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
    </div>

    <div class="form-group">
      <label for="staffID">Staff ID</label>
      <input type="text" id="staffID" name="staffID" ngModel #RetireCalculatorStaffID="ngModel" class="form-control" />
    </div>

    <div>
      <button type="button" class="btn btn-success" (click)="daysForty()">Generate 1</button>
      <input type="text" class="text-field w-input" name="fortyDaysDate" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel" [(ngModel)]="fortyDaysDate" />
    </div>

    <button type="submit" class="btn btn-success">Submit</button>

  </div>
</form>

Будет Объектом, что-то вроде:

{
  RetireRecord: SOME VALUE,
  RetireCalculatorSetDate: SOME VALUE,
  staffID: SOME VALUE,
  fortyDaysDate: SOME VALUE
}

Итак, как вы можете видеть, это все равно не сгенерирует значения для RetireCalculatorDay60 и RetireCalculatorDay90. Поэтому, возможно, вы захотите добавить эти данные и в свою форму.