Save Shopping Cart to Check Out Page

[Maureen Moore]

I have a shopping cart that displays the product name, price, and quantity. I want to submit that information to the database and render the shopping cart on the check out page when I click on the check out button. Right now I don't know how to send the product information to the check out page because I would have to loop through all of the products in order to save them to the database and when I use ngFor to loop, the check out button shows up for every product.

I know that the following code is terrible but it shows what I am trying to do.

shopping-cart.component.html

<div *ngFor="let item of items">
<input type="hidden" class="" name="" value="{{item.quantity}}">
<input type="hidden" class="" name="" value="{{item.product_name }}">
<input type="hidden" class="" name="" value="{{item.product_price }}">

<form [formGroup]="submitForm" (ngSubmit)="checkOut(item.quantity, item.product_name, item.product_price)">
<input type="submit" value="Check Out">
</form>
</div>

shopping-cart.component.ts:

public checkOut(quantity, product_name, product_price) {


let record = {};
record['quantity'] = quantity;
record['product_name'] = product_name;
record['product_price'] = product_price;



this.crudService.create_NewCheckOut(record).then(resp => {
this.quantity = undefined;
this.product_name = "";
this.product_price = undefined;
console.log(resp);
})
.catch(error => {
console.log(error);
});

this.router.navigate(['check-out']);
}
You can see the shopping cart as it looks now at https://cart-64d3f.firebaseapp.com/

[Asad Fiaz]

Hi Maureen,

Checkout button will be shown for each item because you have added the checkout button in the loop. Please remove this line <input type="submit" value="Check Out"> from the form and add it after the closing tag of form. This will show the checkout button for once.

Thanks and Regards

Asad Fiaz

Senior Frontend Engineer

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/f2b7888e-b50e-424b-bee2-9fa81ae655b9n%40googlegroups.com.

[Maureen Moore]

When I put the submit button and the closing tag for the form outside of the div tag, I get the error Unexpected closing tag "div." I need to put the closing tag for the form outside of the div tag or it simply doesn't submit the form.   

On Wednesday, September 23, 2020 at 8:34:58 AM UTC-4 Maureen Moore wrote:

When I put the submit button and the closing tag for the form outside of the div tag, I get the error Unexpected closing tag "div." I need to put the closing tag for the form outside of the div tag or it simply doesn't submit the form. 

[Asad Fiaz]

No No, you just have to put this tag <input type="submit" value="Check Out"> after the /form tag and this will work and button will work when the form data is entered

On Wed, Sep 23, 2020 at 5:35 PM Maureen Moore <maka...@gmail.com> wrote:

When I put the submit button and the closing tag for the form outside of the div tag, I get the error Unexpected closing tag "div." I need to put the closing tag for the form outside of the div tag or it simply doesn't submit the form. 

On Wednesday, September 23, 2020 at 1:59:08 AM UTC-4 ranaas...@gmail.com wrote:

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/f8d0ebde-72cd-4d74-97a0-00c15f98dd8cn%40googlegroups.com.

[Maureen Moore]

When I put the tag <input type="submit" value="Check Out"> after the closing form tag, the form simply does not submit. Why would it?

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAGnD0NsYaq__bbX3-8zJ54z603L4Eqe0ziC4do-y9HsFNXELfw%40mail.gmail.com.