angular - Angular 7，POST 到 .NET Core Web API 发送 NULLS

Question

我正在尝试将 Angular 模板表单中的 HTTP POST 发送到 .NET Core 2.0 中的 Web API。它发送没有错误，但 SQL 中的数据具有所有 NULL 值 (?)。Angular 前端没有模型（仅在 .NET 后端），但“newRetireObject”var 对象与 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>

这是组件.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)})
      }

    }

这是服务.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});
  }



}

标签： angularangular7

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。因此，您可能希望将这些输入也添加到您的表单中。