diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 094fe7e..4e6fef1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; @@ -35,7 +35,8 @@ import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component ], imports: [ BrowserModule, - FormsModule, + FormsModule, + ReactiveFormsModule, HttpModule, AppRoutingModule ], diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.html b/src/app/recipes/recipe-edit/recipe-edit.component.html index 786f11f..8540643 100644 --- a/src/app/recipes/recipe-edit/recipe-edit.component.html +++ b/src/app/recipes/recipe-edit/recipe-edit.component.html @@ -1,3 +1,81 @@ -

- recipe-edit works! -

+
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.ts b/src/app/recipes/recipe-edit/recipe-edit.component.ts index 738c7bd..093c1f3 100644 --- a/src/app/recipes/recipe-edit/recipe-edit.component.ts +++ b/src/app/recipes/recipe-edit/recipe-edit.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; +import { FormGroup, FormControl } from '@angular/forms'; +import { RecipeService } from '../recipe.service'; @Component({ selector: 'app-recipe-edit', @@ -9,16 +11,41 @@ import { ActivatedRoute, Params } from '@angular/router'; export class RecipeEditComponent implements OnInit { id: number; editMode: boolean = false; + recipeForm: FormGroup - constructor(private route: ActivatedRoute) { } + constructor(private route: ActivatedRoute, + private recipeService: RecipeService) { } ngOnInit() { this.route.params.subscribe( (params: Params) => { this.id = +params['id']; this.editMode = params['id'] != null; + this.initForm(); } ); } + onSubmit() { + console.log(this.recipeForm); + } + + private initForm() { + let recipeName = ''; + let recipeImagePath = ''; + let recipeDescription = ''; + + if (this.editMode) { + const recipe = this.recipeService.getRecipe(this.id); + recipeName = recipe.name; + recipeImagePath = recipe.imagePath; + recipeDescription = recipe.description; + } + + this.recipeForm = new FormGroup({ + 'name': new FormControl(recipeName), + 'imagePath': new FormControl(recipeImagePath), + 'description': new FormControl(recipeDescription) + }); + } }