summaryrefslogtreecommitdiff
path: root/recipeBuddy/src/app/add-recipe
diff options
context:
space:
mode:
Diffstat (limited to 'recipeBuddy/src/app/add-recipe')
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.html75
-rw-r--r--recipeBuddy/src/app/add-recipe/add-recipe.component.ts57
2 files changed, 129 insertions, 3 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: ['']
+ })
+ );
+ }
}