How to send array of dates to REST API in Angular
I'm trying to create a UI component where users can add a selection of dates to an "event" object by clicking an "Add Date" button to add another row to a table.
Once the user has selected the appropriate date, they would then click the Save button and the form would be submitted to my corresponding REST API with the request payload containing the array named "events".
E.g.
{
name: "placeholder",
events: [
'2018-12-12',
'2018-12-14',
'2018-12-15'
]
}
However, instead the payload being sent from Angular looks like this:
{
name: "placeholder",
event0: '2018-12-12',
event1: '2018-12-14',
event2: '2018-12-15',
}
Do you know how I can produce the first payload instead?
This is my angular HTML template:
<form #BookingForm="ngForm" (ngSubmit)="saveBooking(BookingForm)">
<div *ngFor="let event of booking.events; let i = index">
<mat-form-field>
<input matInput [matDatepicker]="datePicker" placeholder="Extra date" [(ngModel)]="event" name="event{{i}}">
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>
</div>
<button class="btn btn-secondary" type="button" (click)="addExtraDate()">Add Extra Date</button>
</form>
Angular TS code:
export class Booking {
name: string;
events: array;
}
public booking: any = new Booking;
public addExtraDate(): void {
this.booking.events.push({});
}
public saveBooking(form: any): void {
var item = form.value;
console.log(item);
this.bookingService
.addBooking(item)
.subscribe();
}
angular typescript
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
|
show 3 more comments
I'm trying to create a UI component where users can add a selection of dates to an "event" object by clicking an "Add Date" button to add another row to a table.
Once the user has selected the appropriate date, they would then click the Save button and the form would be submitted to my corresponding REST API with the request payload containing the array named "events".
E.g.
{
name: "placeholder",
events: [
'2018-12-12',
'2018-12-14',
'2018-12-15'
]
}
However, instead the payload being sent from Angular looks like this:
{
name: "placeholder",
event0: '2018-12-12',
event1: '2018-12-14',
event2: '2018-12-15',
}
Do you know how I can produce the first payload instead?
This is my angular HTML template:
<form #BookingForm="ngForm" (ngSubmit)="saveBooking(BookingForm)">
<div *ngFor="let event of booking.events; let i = index">
<mat-form-field>
<input matInput [matDatepicker]="datePicker" placeholder="Extra date" [(ngModel)]="event" name="event{{i}}">
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>
</div>
<button class="btn btn-secondary" type="button" (click)="addExtraDate()">Add Extra Date</button>
</form>
Angular TS code:
export class Booking {
name: string;
events: array;
}
public booking: any = new Booking;
public addExtraDate(): void {
this.booking.events.push({});
}
public saveBooking(form: any): void {
var item = form.value;
console.log(item);
this.bookingService
.addBooking(item)
.subscribe();
}
angular typescript
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
isthis.booking.extra_datesreferring to the object your showing at the beginning?
– ams
Nov 22 '18 at 20:43
Hi, Did you tried changing name of your inputs as array? name="extra_date[{{i}}]">
– Padhu
Nov 22 '18 at 20:53
@ams Sorry yes this.booking.extra_dates is referencing the object at the beginning. I've updated the question to make it consistent.
– ajgisme
Nov 22 '18 at 21:55
@Padhu Just tried that but same problem
– ajgisme
Nov 22 '18 at 21:56
How is your form connected to "name"? Show the code building the form...
– ritaj
Nov 22 '18 at 21:58
|
show 3 more comments
I'm trying to create a UI component where users can add a selection of dates to an "event" object by clicking an "Add Date" button to add another row to a table.
Once the user has selected the appropriate date, they would then click the Save button and the form would be submitted to my corresponding REST API with the request payload containing the array named "events".
E.g.
{
name: "placeholder",
events: [
'2018-12-12',
'2018-12-14',
'2018-12-15'
]
}
However, instead the payload being sent from Angular looks like this:
{
name: "placeholder",
event0: '2018-12-12',
event1: '2018-12-14',
event2: '2018-12-15',
}
Do you know how I can produce the first payload instead?
This is my angular HTML template:
<form #BookingForm="ngForm" (ngSubmit)="saveBooking(BookingForm)">
<div *ngFor="let event of booking.events; let i = index">
<mat-form-field>
<input matInput [matDatepicker]="datePicker" placeholder="Extra date" [(ngModel)]="event" name="event{{i}}">
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>
</div>
<button class="btn btn-secondary" type="button" (click)="addExtraDate()">Add Extra Date</button>
</form>
Angular TS code:
export class Booking {
name: string;
events: array;
}
public booking: any = new Booking;
public addExtraDate(): void {
this.booking.events.push({});
}
public saveBooking(form: any): void {
var item = form.value;
console.log(item);
this.bookingService
.addBooking(item)
.subscribe();
}
angular typescript
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
I'm trying to create a UI component where users can add a selection of dates to an "event" object by clicking an "Add Date" button to add another row to a table.
Once the user has selected the appropriate date, they would then click the Save button and the form would be submitted to my corresponding REST API with the request payload containing the array named "events".
E.g.
{
name: "placeholder",
events: [
'2018-12-12',
'2018-12-14',
'2018-12-15'
]
}
However, instead the payload being sent from Angular looks like this:
{
name: "placeholder",
event0: '2018-12-12',
event1: '2018-12-14',
event2: '2018-12-15',
}
Do you know how I can produce the first payload instead?
This is my angular HTML template:
<form #BookingForm="ngForm" (ngSubmit)="saveBooking(BookingForm)">
<div *ngFor="let event of booking.events; let i = index">
<mat-form-field>
<input matInput [matDatepicker]="datePicker" placeholder="Extra date" [(ngModel)]="event" name="event{{i}}">
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
</mat-form-field>
</div>
<button class="btn btn-secondary" type="button" (click)="addExtraDate()">Add Extra Date</button>
</form>
Angular TS code:
export class Booking {
name: string;
events: array;
}
public booking: any = new Booking;
public addExtraDate(): void {
this.booking.events.push({});
}
public saveBooking(form: any): void {
var item = form.value;
console.log(item);
this.bookingService
.addBooking(item)
.subscribe();
}
angular typescript
angular typescript
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
edited Nov 22 '18 at 22:32
ajgisme
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
asked Nov 22 '18 at 20:14
ajgismeajgisme
175118
175118
isthis.booking.extra_datesreferring to the object your showing at the beginning?
– ams
Nov 22 '18 at 20:43
Hi, Did you tried changing name of your inputs as array? name="extra_date[{{i}}]">
– Padhu
Nov 22 '18 at 20:53
@ams Sorry yes this.booking.extra_dates is referencing the object at the beginning. I've updated the question to make it consistent.
– ajgisme
Nov 22 '18 at 21:55
@Padhu Just tried that but same problem
– ajgisme
Nov 22 '18 at 21:56
How is your form connected to "name"? Show the code building the form...
– ritaj
Nov 22 '18 at 21:58
|
show 3 more comments
isthis.booking.extra_datesreferring to the object your showing at the beginning?
– ams
Nov 22 '18 at 20:43
Hi, Did you tried changing name of your inputs as array? name="extra_date[{{i}}]">
– Padhu
Nov 22 '18 at 20:53
@ams Sorry yes this.booking.extra_dates is referencing the object at the beginning. I've updated the question to make it consistent.
– ajgisme
Nov 22 '18 at 21:55
@Padhu Just tried that but same problem
– ajgisme
Nov 22 '18 at 21:56
How is your form connected to "name"? Show the code building the form...
– ritaj
Nov 22 '18 at 21:58
is
this.booking.extra_dates referring to the object your showing at the beginning?– ams
Nov 22 '18 at 20:43
is
this.booking.extra_dates referring to the object your showing at the beginning?– ams
Nov 22 '18 at 20:43
Hi, Did you tried changing name of your inputs as array? name="extra_date[{{i}}]">
– Padhu
Nov 22 '18 at 20:53
Hi, Did you tried changing name of your inputs as array? name="extra_date[{{i}}]">
– Padhu
Nov 22 '18 at 20:53
@ams Sorry yes this.booking.extra_dates is referencing the object at the beginning. I've updated the question to make it consistent.
– ajgisme
Nov 22 '18 at 21:55
@ams Sorry yes this.booking.extra_dates is referencing the object at the beginning. I've updated the question to make it consistent.
– ajgisme
Nov 22 '18 at 21:55
@Padhu Just tried that but same problem
– ajgisme
Nov 22 '18 at 21:56
@Padhu Just tried that but same problem
– ajgisme
Nov 22 '18 at 21:56
How is your form connected to "name"? Show the code building the form...
– ritaj
Nov 22 '18 at 21:58
How is your form connected to "name"? Show the code building the form...
– ritaj
Nov 22 '18 at 21:58
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437536%2fhow-to-send-array-of-dates-to-rest-api-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53437536%2fhow-to-send-array-of-dates-to-rest-api-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
is
this.booking.extra_datesreferring to the object your showing at the beginning?– ams
Nov 22 '18 at 20:43
Hi, Did you tried changing name of your inputs as array? name="extra_date[{{i}}]">
– Padhu
Nov 22 '18 at 20:53
@ams Sorry yes this.booking.extra_dates is referencing the object at the beginning. I've updated the question to make it consistent.
– ajgisme
Nov 22 '18 at 21:55
@Padhu Just tried that but same problem
– ajgisme
Nov 22 '18 at 21:56
How is your form connected to "name"? Show the code building the form...
– ritaj
Nov 22 '18 at 21:58