Angular 7, POST в .NET Core Web API, отправляющий NULLS

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

Вот компонент .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)})
      }

    }

Вот сервис.ц ....

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



}

person snj013    schedule 26.10.2018    source источник
comment
Я бы хотел увидеть ваш код API. Первое предположение: либо ваш случай ошибочен, либо вы отправляете не то, что, по вашему мнению, отправляете. Отображает ли console.log () ожидаемые данные? Отображает ли вкладка сети в Chrome, firebug или чем-то еще ожидаемую HTTP-транзакцию?   -  person meteorainer    schedule 26.10.2018
comment
Да, контроллер получил успешный запрос, без ошибок. Данные были нулевыми, потому что я не сопоставил атрибут name с названием модели в HTML. Спасибо!   -  person snj013    schedule 26.10.2018


Ответы (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 не будут генерироваться. Так что вы можете захотеть добавить их в свою форму.

person SiddAjmera    schedule 26.10.2018
comment
Спасибо, сработало! Я знал, что мне нужен атрибут name, но не понимал, что у него должно быть то же имя. Я пытаюсь отправить текущий день / время на ввод RetireCalculatorCreateDate при инициализации. Вы можете увидеть мою попытку в моем коде. Это не работает. Какие-либо предложения? - person snj013; 26.10.2018
comment
Я понял, как получить текущий день / время. Вспомнил, что мне нужно было использовать ... [(ngModel)] = RetireCalculatorCreateDate (вместо того, как это было в моем коде выше) во входном теге для привязки. Надеюсь, это лучшая практика. - person snj013; 27.10.2018
comment
Элементы управления вводом, которые уже присутствуют в шаблоне, не нужно связывать с [(ngModel)]. Им просто нужно дать директиву ngModel и атрибут имени. И тогда это же имя отобразится в значении поля формы. - person SiddAjmera; 27.10.2018