diff options
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.html | 75 | ||||
| -rw-r--r-- | recipeBuddy/src/app/add-recipe/add-recipe.component.ts | 57 | ||||
| -rw-r--r-- | recipeBuddy/src/app/app-routing.module.ts | 4 | ||||
| -rw-r--r-- | recipeBuddy/src/app/app.module.ts | 7 |
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] |