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>