Angular 7, POST to .NET Core Web API sending NULLS

Question

I'm trying to HTTP POST from an Angular Template form to my Web API in .NET Core 2.0. It sends with no errors, but the data in SQL has all NULL values (?). There is no model on the Angular front-end (only in the .NET back-end), but the "newRetireObject" var object matches the SQL.

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

Here is 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)})
      }

    }

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



}

I'd like to see your api code. First guess is either your case is wrong or you aren't sending what you think you're sending. Is the console.log() showing the expected data? Does the network tab in chrome or firebug or whatever show you the expected http transaction? — meteorainer
– meteorainer, Commented Oct 26, 2018 at 18:21
Yes, the controller was receiving a successful request, no errors. Data was null because I did not match the name attribute with the model name in the HTML. Thnx! — snj013
– snj013, Commented Oct 26, 2018 at 20:48

SiddAjmera · Accepted Answer · 2018-10-26 18:30:53Z

1

Here's the deal. Since you're using the Template Driven Forms approach, you'll have to add the name attribute to each input in your form.

Once you do that, that will be available as the field in the form.value.

So the value of this form:

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

Will be an Object, something like:

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

So as you can see, this will still not generate the values for RetireCalculatorDay60 and RetireCalculatorDay90. So you might want to add the input for those as well to your form.

answered Oct 26, 2018 at 18:30

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

snj013 Over a year ago

Thank you, that worked! I knew I needed the name attribute, but did not realize it should have the same name. I'm trying to send the current day/time to the "RetireCalculatorCreateDate" input on init. You can see my attempt in my code. It's not working. Any suggestions?

snj013 Over a year ago

I figured out how get current day/time. Remembered I needed to use... [(ngModel)]="RetireCalculatorCreateDate" (instead of how it is in my code above) in the input tag to bind. Hopefully this is best practice.

SiddAjmera Over a year ago

The input controls which are already present in the template don't need to be binded with [(ngModel)]. They just need the be given a directive ngModel and a name attribute. And then the same name will reflect in the form's field value.

Collectives™ on Stack Overflow

Angular 7, POST to .NET Core Web API sending NULLS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related