From 0b7fbadd8b71df785b8ca8084b53401ae77f3d27 Mon Sep 17 00:00:00 2001
From: Christian Greif <greifch67520@th-nuernberg.de>
Date: Tue, 19 May 2020 16:59:13 +0200
Subject: [PATCH] =?UTF-8?q?V0.1c=20Implementierung=20Form-Group=20f=C3=BCr?=
 =?UTF-8?q?=20Eingabe=20der=20Zettel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html        | 42 +++++++++++++++----------------
 src/app/app.component.ts          | 13 +++++++---
 src/app/app.module.ts             |  3 ++-
 src/app/blog-entry.component.html |  2 +-
 src/app/blog-entry.ts             |  4 ++-
 src/app/initialEntries.ts         |  6 +++--
 6 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index ece7975..6c963ce 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,15 +3,29 @@
 <h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
 
 <div class="form">
+<form novalidate (ngSubmit)="saveTask(form.value)" #form="ngForm">
+  <div class="form-group">
+    <label for="title">Titel*</label>
+    <input type="text" class="form-control" name="title" id="title" #title ngModel required/>
 
-  <div class="control">
-    <label for="title">Titel:</label>
-    <input type="text" id="title" #title/>
-  </div>
-  <div class="control">
-    <label for="title">Bild-URL:</label>
-    <input type="text" id="image" #image/>
+    <label for="image">Bild-URL*</label>
+    <input type="text" class="form-control" name="title" id="image" #image ngModel required/>
+
+    <label>Kategorie*</label>
+    <input type="text" class="form-control"  id="kategorie" #kategorie ngModel required/>
+
+    <label for="menge">Menge*</label>
+    <input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
+
+    <label for="kommentar">Kommentar: </label>
+    <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
+    </textarea>
   </div>
+  <button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
+    Blog-Eintrag anlegen
+  </button>
+
+</form>
   <div class="container">
     <div class="row custom-wrapper">
       <div class="col-md-12">
@@ -37,18 +51,4 @@
       </div>
     </div>
   </div>
-  <div class="control">
-    <label for="title">Kategorie:</label>
-    <input type="text" id="kategorie" #kategorie/>
-  </div>
-  <div class="control">
-    <label for="text">Text:</label>
-    <textarea id="text" cols="20" rows="3" #text>
-    </textarea>
-  </div>
-  <div>
-    <button (click)="createBlogEntry(title.value, image.value, kategorie.value, text.value)">
-      Blog-Eintrag anlegen
-    </button>
-  </div>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index fea416a..96beb23 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,18 +22,23 @@ export class AppComponent {
   isSubmitted = false;
   // Kategorien
   Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
-/*########### Form ###########*/
+
+  /*########### Form ###########*/
   registrationForm = this.fb.group({
     kategorieName: ['', [Validators.required]]
   });
+ saveTask(value: any){
+   console.log(value);
+ }
 
-  createBlogEntry(title: string, image: string, kategorie: string, text: string, ) {
-    if (title && image && text && kategorie) {
+  createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
+    if (title && image && kommentar && kategorie) {
       const entry = new BlogEntry();
       entry.title = title;
       entry.image = image;
-      entry.text = text;
       entry.kategorie = kategorie;
+      entry.menge = menge;
+      entry.kommentar = kommentar;
       this.entries.push(entry);
     }
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0c98b22..8cce878 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import {ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -12,6 +12,7 @@ import {ReactiveFormsModule} from '@angular/forms';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     ReactiveFormsModule
   ],
   providers: [],
diff --git a/src/app/blog-entry.component.html b/src/app/blog-entry.component.html
index 65fcfb4..96a0b26 100644
--- a/src/app/blog-entry.component.html
+++ b/src/app/blog-entry.component.html
@@ -5,6 +5,6 @@
     <div class="blog-summary">
         <span class="title">{{entry.title}}</span>
       <p> {{entry.kategorie}}</p>
-      <p> {{entry.text}}</p>
+      <p> {{entry.kommentar}}</p>
     </div>
 </div>
diff --git a/src/app/blog-entry.ts b/src/app/blog-entry.ts
index fe7f462..af828e0 100644
--- a/src/app/blog-entry.ts
+++ b/src/app/blog-entry.ts
@@ -2,5 +2,7 @@ export class BlogEntry {
   title: string;
   image: string;
   kategorie: string;
-  text: string;
+  menge: string;
+  kommentar: string;
+
 }
diff --git a/src/app/initialEntries.ts b/src/app/initialEntries.ts
index 722d6f7..c4f91c7 100644
--- a/src/app/initialEntries.ts
+++ b/src/app/initialEntries.ts
@@ -3,12 +3,14 @@ export const initialEntries = [
     title: 'Edeka',
     image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png',
     kategorie: 'Lebensmittel',
-    text: 'Hier könnten ihre benötigten Einkäufe stehen'
+    menge: '1',
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
   },
   {
     title: 'Aldi Süd',
     image: 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg',
     kategorie: 'Lebensmittel',
-    text: 'Hier könnten ihre benötigten Einkäufe stehen'
+    menge: '1',
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
   }
 ];