Form Array push as second last item in array

Question

I have the following code to push a new item to the very end of the form array:

(<FormArray>this.invoicesForm.get('invoices')).push(this.fBuilder.group({
            id: null,
            issueDate: [null, Validators.required], // Only fill in and set the required validator for issue date if a custom date has already been chosen
            invoiceIssuedStateCode: [0],
            canEditIssueDate: [true],
            chooseDate: [false],
            issued: [false],
            paidStatus: [0],
            reference: [null],
            creditNotes: this.buildCreditNotes([]),
            lineItems: this.buildNewLineItems(this.lineItemsRecord.lineItems)
        }));

However I need to push this item as the second last item in the array. How would I go about this?

Francisco Santorelli · Accepted Answer · 2019-06-07 12:40:17Z

5

Instead of pushing, you could splice it:

Splice

it would work this way:

(<FormArray>this.invoicesForm.get('invoices')).controls
    // splicing instead of pushing
    .splice(-2, 0, this.fBuilder.group({
            // your fb config
        }));

notice the -2 (index -2 equals length - 2), and the 0. The -2 says where to insert or delete, the 0 that you are deleting 0 iterables, and the object you pass is then inserted (the fb.group()).

In short: you are targeting index -2 (previous to last item), you are telling it to delete 0 items, and then you are pushing at that index a new item (your formGroup object). That's how splice works!

edited Jun 7, 2019 at 12:40

answered Jun 7, 2019 at 12:14

Francisco Santorelli

1,3589 silver badges13 bronze badges

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

2 Comments

Andrew Howard Over a year ago

Thanks but I get a strange error saying "Property 'splice' does not exist on type 'FormArray'"

Francisco Santorelli Over a year ago

OHHHHH I get what's happening. don't splice to FormArray... splice to FormArray.controls

Manu · Accepted Answer · 2019-06-07 12:28:40Z

0

You can use the javascript function 'splice' over the array.

 var index =  (<FormArray>this.invoicesForm.get('invoices')).length-1;

  fruits.splice(index, 0, this.fBuilder.group({
            id: null,
            issueDate: [null, Validators.required], // Only fill in and set the required validator for issue date if a custom date has already been chosen
            invoiceIssuedStateCode: [0],
            canEditIssueDate: [true],
            chooseDate: [false],
            issued: [false],
            paidStatus: [0],
            reference: [null],
            creditNotes: this.buildCreditNotes([]),
            lineItems: this.buildNewLineItems(this.lineItemsRecord.lineItems)
        }));

It will add the item as second last item in the array.

edited Jun 7, 2019 at 12:28

answered Jun 7, 2019 at 12:18

Manu

1781 gold badge1 silver badge8 bronze badges

2 Comments

Andrew Howard Over a year ago

Thanks but I get a strange error saying "Property 'splice' does not exist on type 'FormArray'"

Manu Over a year ago

@AndrewJuniorHoward Can you please try fruits.insert(index,this.fBuilder.group({..........) instead of splice. You have to just provide the index and new item to the insert function.

Collectives™ on Stack Overflow

Form Array push as second last item in array

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related