From 4e252c8302c1172c971830e29b4e46d3a2efd50a Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Sat, 21 Dec 2019 15:10:05 +0100
Subject: [PATCH] =?utf8?q?Formular=20wie=20in=20Tutorial=20erg=C3=A4nzt=20?=
 =?utf8?q?--=20Funzt=20nicht?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 src/app/cart/cart.component.html | 20 ++++++++++++++++++++
 src/app/cart/cart.component.ts   | 18 +++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/app/cart/cart.component.html b/src/app/cart/cart.component.html
index 5ccdc17..7e9bf3d 100644
--- a/src/app/cart/cart.component.html
+++ b/src/app/cart/cart.component.html
@@ -8,3 +8,23 @@
   <span>{{ item.name }}</span>
   <span>{{ item.price | currency }}</span>
 </div>
+
+<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
+
+  <div>
+    <label for="name">
+      Name
+    </label>
+    <input id="name" type="text" formControlName="name">
+  </div>
+
+  <div>
+    <label for="address">
+      Address
+    </label>
+    <input id="address" type="text" formControlName="address">
+  </div>
+
+  <button class="button" type="submit">Purchase</button>
+
+</form>
diff --git a/src/app/cart/cart.component.ts b/src/app/cart/cart.component.ts
index 500bd05..3d3bb99 100644
--- a/src/app/cart/cart.component.ts
+++ b/src/app/cart/cart.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 import { CartService } from '../cart.service';
 
 @Component({
@@ -9,11 +10,26 @@ import { CartService } from '../cart.service';
 export class CartComponent implements OnInit {
 
   items;
+  checkoutForm;
 
-  constructor(private cartService: CartService) { }
+  constructor(
+      private cartService: CartService,
+      private formBuilder: FormBuilder) {
+    this.checkoutForm = this.formBuilder.group({
+      name: '',
+      address: ''
+    });
+  }
 
   ngOnInit() {
     this.items = this.cartService.getItems();
   }
 
+  onSubmit(customerData) {
+    // Process checkout data here
+    console.warn('Your order has been submitted', customerData);
+
+    this.items = this.cartService.clearCart();
+    this.checkoutForm.reset();
+  }
 }
-- 
2.20.1