summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.html75
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.ts57
-rw-r--r--recipeBuddy/src/app/app-routing.module.ts4
-rw-r--r--recipeBuddy/src/app/app.module.ts7
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]