V0.1c Implementierung Form-Group für Eingabe der Zettel

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>

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);
     }
   }

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: [],

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>

src/app/blog-entry.ts

@@ -2,5 +2,7 @@ export class BlogEntry {
   title: string;
   image: string;
   kategorie: string;
-  text: string;
+  menge: string;
+  kommentar: string;
+
 }

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'
   }
 ];