Seeking assistance with sending a request from an Angular frontend to an ASP.NET API server. The form for submission is defined as:
export class SaleToUpdate {
id: number;
shipped: boolean;
shipDate: string;
returned: boolean;
returnDate: string;
}
Markup and Code
<mat-grid-tile [colspan] = "2" [rowspan] = "1">
<mat-form-field>
<input formControlName="shipDate" matInput placeholder="Ship Date">
</mat-form-field>
<div class="radio-group ml-3">
<mat-radio-group formControlName="shipped" required (ngModelChange)="shipped">
<mat-radio-button value="false">No</mat-radio-button>
<mat-radio-button value="true" class="ml-4">Yes</mat-radio-button>
</mat-radio-group>
</div>
</mat-grid-tile>
The onSubmit() function
onSubmit() {
if (this.salesService.saleForm.valid) {
let sale: SaleToUpdate = this.salesService.saleForm.value;
console.log(sale);
this.salesService.updateSale(sale.id, sale).subscribe(res => {
console.log(res);
}, error => {
console.log(error);
});
}
}
Therefore, my goal is to send the form data (SaleToUpdate class) to the backend server.
Data Transfer Object (DTO) on Server-Side
using System;
namespace API.Dtos
{
public class SaleUpdateDto
{
public int Id { get; set; }
public bool Shipped { get; set; }
public DateTime ShipDate { get; set; }
public bool Returned { get; set; }
public DateTime ReturnDate { get; set; }
}
}
Encountering an error from the console:
"The JSON value could not be converted to System.Boolean. Path: $.shipped | LineNumber: 0 | BytePositionInLine: 274." when clicking onSubmit from the client.
Observation that the values for 'shipped' and 'returned' from the form are of type string, rather than boolean.
Any suggestions for resolving this issue would be greatly appreciated. Thank you!