From 9a459ac4cc12dce613c239096002e6e32d8469ed Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Mon, 6 Jun 2022 11:52:40 +0200
Subject: [PATCH] add: ngform with title bindings

---
 src/app/app.component.html | 10 +++++-----
 src/app/app.component.ts   | 15 ++++++++-------
 src/app/app.module.ts      |  4 +++-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index d4b2298..4a88bde 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -11,23 +11,23 @@
 	id="buttonFood"
 	(click)="changeFormFoodVisible()">Speise hinzufügen</button>
 
-<form class="form" id="formTitle" *ngIf="formTitleVisible">
+<form #formTitle="ngForm" *ngIf="formTitleVisible">
 	<label>Titel</label>
-	<input name="title" type="text" />
+	<input [(ngModel)]="title" name="title" type="text" />
 	<button class="button"
 		type="button"
 		id="addTitle">Hinzufügen</button>
 </form>
 
-<form class="form" id="formSubtitle" *ngIf="formSubtitleVisible">
+<form #formSubtitle="ngForm" *ngIf="formSubtitleVisible">
 	<label>Untertitel</label>
-	<input name="subtitle" type="text" />
+	<input [(ngModel)]="subtitle" name="subtitle" type="text" />
 	<button class="button"
 		type="button"
 		id="addSubtitle">Hinzufügen</button>
 </form>
 
-<form class="form" id="formFood" *ngIf="formFoodVisible">
+<form #formFood="ngForm" *ngIf="formFoodVisible">
 	<label>Speise</label>
 	<input name="food" type="text" />
 	<label>Beilage</label>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 153a178..591df67 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,22 +8,23 @@ import { Component } from '@angular/core';
 
 export class AppComponent
 {
-	public title = 'speisekarten-generator';
-	public formTitleVisible = false;
-	public formSubtitleVisible = false;
-	public formFoodVisible = false;
+	public title: string = ""
+	public subtitle: string = ""
+	public formTitleVisible: boolean = false;
+	public formSubtitleVisible: boolean = false;
+	public formFoodVisible: boolean = false;
 
-	public changeFormTitleVisible()
+	public changeFormTitleVisible(): void
 	{
 		this.formTitleVisible = !this.formTitleVisible;
 	}
 
-	public changeFormSubtitleVisible()
+	public changeFormSubtitleVisible(): void
 	{
 		this.formSubtitleVisible = !this.formSubtitleVisible;
 	}
 
-	public changeFormFoodVisible()
+	public changeFormFoodVisible(): void
 	{
 		this.formFoodVisible = !this.formFoodVisible;
 	}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8dfc1d6..1172a6e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 
@@ -8,7 +9,8 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
-- 
2.39.5