Angular 11 Forms and Http POST - html

Question

I'm trying to post information I entered from my text boxes but I'm receiving an error,
core.js:6210 ERROR TypeError: Cannot read property 'toString' of undefined
I was wondering as to why my variables are appearing as undefined? Additionally, how might I fix this problem?
Component File
import { Component, Inject, OnInit } from '#angular/core';
import { HttpClient, HttpParams } from '#angular/common/http';
import { FormGroup, FormControl, FormBuilder } from '#angular/forms';
#Component({
selector: 'app-WeatherData',
templateUrl: './AddWeatherData.component.html',
})
export class PostDataComponent {
baseUrl: string;
date: number;
temperatureC: number;
summary: string;
weatherForm: FormGroup;
constructor(public http: HttpClient, #Inject('BASE_URL') baseUrl: string, private formBuilder: FormBuilder) {
this.baseUrl = "https://localhost:44347/WeatherForecast";
this.weatherForm = formBuilder.group({
Date: new FormControl(),
TemperatureC: new FormControl(),
Summary: new FormControl()
});
}
CreateData() {
const params = new HttpParams({
fromObject: {
'date': this.weatherForm.value.date.toString(),
'temperatureC': this.weatherForm.value.temperatureC.toString(),
'summary': this.weatherForm.value.summary.toString()
}
});
let endPoints = '';
console.log(params);
this.http.post(this.baseUrl + endPoints, {},{ params: params }).subscribe(data => {
console.log(data);
});
}
}
My HTML file includes the forms setup and the type declarations are text for each of the variables I included. Is this an issue?
HTML File
<form [formGroup]="weatherForm">
<div class="form-group">
<label for="inputDate">Date</label>
<input type="text" class="form-control" id="inputDate" formControlName="Date">
</div>
<div class="form-group">
<label for="inputTemp">Temperature C</label>
<input type="text" class="form-control" id="inputTemp" formControlName="TemperatureC">
</div>
<div class="form-group">
<label for="inputSummary">Summary</label>
<input type="text" class="form-control" id="inputSummary" formControlName="Summary">
</div>
<button type="submit" class="btn btn-primary" (click)="CreateData()">Add New Weather Data</button>
</form>

Answer 1

debug at
fromObject: {
'date': this.weatherForm.value.date.toString(),
'temperatureC': this.weatherForm.value.temperatureC.toString(),
'summary': this.weatherForm.value.summary.toString()
}
and check the value of this.weatherForm.value
all properties are case sensitive TemperatureC is not equal to temperatureC
and if you execute undefine.toString() then you will get the error

Answer 2

Please replace your code with below,
import { Component, Inject, OnInit } from '#angular/core';
import { HttpClient, HttpParams } from '#angular/common/http';
import { FormGroup, FormControl, FormBuilder } from '#angular/forms';
#Component({
selector: 'app-WeatherData',
templateUrl: './AddWeatherData.component.html',
})
export class PostDataComponent {
baseUrl: string;
date: number;
temperatureC: number;
summary: string;
weatherForm: FormGroup;
constructor(public http: HttpClient, #Inject('BASE_URL') baseUrl: string, private formBuilder: FormBuilder) {
this.baseUrl = "https://localhost:44347/WeatherForecast";
this.weatherForm = formBuilder.group({
Date: new FormControl(),
TemperatureC: new FormControl(),
Summary: new FormControl()
});
}
CreateData() {
const params = new HttpParams({
fromObject: {
'date': this.weatherForm.value.Date.toString(),
'temperatureC': this.weatherForm.value.TemperatureC.toString(),
'summary': this.weatherForm.value.Summary.toString()
}
});
let endPoints = '';
console.log(params);
this.http.post(this.baseUrl + endPoints, {},{ params: params }).subscribe(data => {
console.log(data);
});
}
}