Add basic form for adding a recipe

4 files changed, 137 insertions, 6 deletions

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 29e904b..3a42687 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -1 +1,74 @@
-<p>add-recipe works!</p>
+<form [formGroup]="recipeForm">
+	<label>
+		Name:
+		<input type="text" formControlName="recipeName">
+	</label>
+	<label>
+		Description:
+		<input type="text" formControlName="desc">
+	</label>
+	<label>
+		Servings:
+		<input type="text" formControlName="servingSize">
+	</label>
+	<label>
+		Cooking Time:
+		<input type="text" formControlName="cookTime">
+	</label>
+	<label>
+		Keywords/Tags:
+		<input type="text" formControlName="tags">
+	</label>
+	<label>
+		Photos (URLS):
+		<input type="text" formControlName="photos">
+	</label>
+
+	<div formArrayName="ingredients">
+		<h3>Ingredients</h3>
+		<button (click)="addIngredient()">Add Ingredient</button>
+		<div *ngFor="let address of ingredients.controls; let i=index">
+			<div [formGroupName]="i">
+				<h4>Ingredient {{ i + 1 }}</h4>
+				<label>
+					Name:
+					<input type="text"
+					formControlName="ingrName">
+				</label>
+				<label>
+					Amount:
+					<input type="text"
+					formControlName="amount">
+				</label>
+				<label>
+					Name:
+					<input type="text"
+					formControlName="units">
+				</label>
+			</div>
+		</div>
+	</div>
+
+	<div formArrayName="steps">
+		<h3>Steps</h3>
+		<button (click)="addStep()">Add Step</button>
+		<div *ngFor="let address of steps.controls; let i=index">
+			<div [formGroupName]="i">
+				<h4>Step {{ i + 1 }}</h4>
+				<label>
+					Instructions:
+					<input type="text"
+					formControlName="instruct">
+				</label>
+				<label>
+					Timer:
+					<input type="text"
+					formControlName="timer">
+				</label>
+			</div>
+		</div>
+	</div>
+</form>
+<p>
+Value: {{ recipeForm.value | json }}
+</p>
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
index a7be0e0..b0e5ce5 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
@@ -1,15 +1,68 @@
 import { Component, OnInit } from '@angular/core';
 
+import { FormControl } from '@angular/forms';
+
+import { FormBuilder } from '@angular/forms';
+import { FormArray } from '@angular/forms';
+
 @Component({
   selector: 'app-add-recipe',
   templateUrl: './add-recipe.component.html',
   styleUrls: ['./add-recipe.component.css']
 })
-export class AddRecipeComponent implements OnInit {
 
-  constructor() { }
+export class AddRecipeComponent {
+
+  recipeForm = this.fb.group({
+    recipeName: [''],
+    desc: [''],
+    ingredients: this.fb.array([
+      this.fb.group({
+        ingrName: [''],
+        amount: [''],
+        units: ['']
+        })
+    ]),
+    steps: this.fb.array([
+      this.fb.group({
+        instruct: [''],
+        timer: ['']
+        })
+    ]),
+    servingSize: [''],
+    cookTime: [''],
+    tags: [''],
+    photos: ['']
+  });
+  constructor(private fb: FormBuilder) { }
 
   ngOnInit() {
   }
 
+  get ingredients() {
+    return this.recipeForm.get('ingredients') as FormArray;
+  }
+
+  addIngredient() {
+    this.ingredients.push(
+    this.fb.group({
+      ingrName: [''],
+      amount: [''],
+      units: ['']
+      })
+  );
+  }
+
+  get steps() {
+    return this.recipeForm.get('steps') as FormArray;
+  }
+
+  addStep() {
+    this.steps.push(
+    this.fb.group({
+      instruct: [''],
+      timer: ['']
+      })
+  );
+  }
 }
diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts
index a6e4399..bb7c96e 100644
--- a/recipeBuddy/src/app/app-routing.module.ts
+++ b/recipeBuddy/src/app/app-routing.module.ts
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { CookPageComponent } from './cook-page/cook-page.component';
+import { AddRecipeComponent } from './add-recipe/add-recipe.component';
 
 const routes: Routes = [
 	{ path: '', redirectTo: '/cook', pathMatch: 'full' },
-	{ path: 'cook', component: CookPageComponent }
+	{ path: 'cook', component: CookPageComponent },
+	{ path: 'add', component: AddRecipeComponent }
 ];
 
 @NgModule({
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts
index fb12cf6..4d2ab47 100644
--- a/recipeBuddy/src/app/app.module.ts
+++ b/recipeBuddy/src/app/app.module.ts
@@ -10,7 +10,9 @@ import { StepCardComponent } from './cook-page/step-card/step-card.component';
 import { AppRoutingModule } from './app-routing.module';
 
 import { HttpClientModule } from '@angular/common/http';
-import { AddRecipeComponent } from './add-recipe/add-recipe.component'
+import { AddRecipeComponent } from './add-recipe/add-recipe.component';
+
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -23,7 +25,8 @@ import { AddRecipeComponent } from './add-recipe/add-recipe.component'
     BrowserModule,
     AppRoutingModule,
     MatCardModule,
-    HttpClientModule
+    HttpClientModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]