From 443ded565b1482eaf17176967372f3986497f1b8 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Wed, 4 Dec 2019 23:00:02 -0500 Subject: Add basic form for adding a recipe --- .../src/app/add-recipe/add-recipe.component.html | 75 +++++++++++++++++++++- .../src/app/add-recipe/add-recipe.component.ts | 57 +++++++++++++++- recipeBuddy/src/app/app-routing.module.ts | 4 +- recipeBuddy/src/app/app.module.ts | 7 +- 4 files changed, 137 insertions(+), 6 deletions(-) (limited to 'recipeBuddy/src') 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 @@ -

add-recipe works!

+
+ + + + + + + +
+

Ingredients

+ +
+
+

Ingredient {{ i + 1 }}

+ + + +
+
+
+ +
+

Steps

+ +
+
+

Step {{ i + 1 }}

+ + +
+
+
+
+

+Value: {{ recipeForm.value | json }} +

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] -- cgit v1.1