add: ngform with title bindings

diff --git a/src/app/app.component.html b/src/app/app.component.html
index d4b22982d79fc5c151abdbb56bc9f3de02d35f42..4a88bdefa8548cc2dda0dfd759ad91269e55a707 100644 (file)
--- 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 153a178919ba2681b51a8abe65458776191e76f0..591df673281381f4f9d9e7b5db1862fdc36fca26 100644 (file)
--- 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 8dfc1d68272a4187ff2fd1d95cc18be7f1bb008e..1172a6e8177d60a9cc4a3fc0d2b10c3b9ede2d46 100644 (file)
--- 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]